如何实现微前端应用

书中仙
2020.01.14 17:15 字数 684 阅读 105 评论 0 喜欢 0

1.基本概念

实现一套微前端架构,可以把其分成四部分(参考:https://alili.tech/archive/11052bf4/

加载器:也就是微前端架构的核心,主要用来调度子应用,决定何时展示哪个子应用, 可以把它理解成电源。

包装器:有了加载器,可以把现有的应用包装,使得加载器可以使用它们,它相当于电源适配器。

主应用:一般是包含所有子应用公共部分的项目—— 它相当于电器底座

子应用:众多展示在主应用内容区的应用—— 它相当于你要使用的电器

所以是这么个概念:电源(加载器)→电源适配器(包装器)→️电器底座(主应用)→️电器(子应用)️

总的来说是这样一个流程:用户访问index.html后,浏览器运行加载器的js文件,加载器去配置文件,然后注册配置文件中配置的各个子应用后,首先加载主应用(菜单等),再通过路由判定,动态远程加载子应用。

2.预备知识

2.1 SystemJs

SystemJS提供通用的模块导入途径,支持传统模块和ES6的模块。

SystemJs有两个版本,6.x版本是在浏览器中使用的,0.21版本的是在浏览器和node环境中使用的,两者的使用方式不同。(参考:https://github.com/systemjs/systemjs)

在微服务中主要充当加载器的角色。

2.2 singleSpa

single-spa是一个在前端应用程序中将多个javascript应用集合在一起的框架。主要充当包装器的角色。(参考:https://single-spa.js.org/docs/getting-started-overview.html

未完待续...


支付二维码
登录 后发表评论
${comment_count}条评论 评论

智慧如你,不想发表一点想法咩~

推荐阅读
更多精彩内容