vlambda博客
学习文章列表

什么是微前端？

随着业务的不断升级，有时候会遇到在多个项目中重复使用相同组件的问题。如果每个项目都复制一套相同的代码，可能短时间内能够达到业务要求，但是会给后期的项目维护提高成本，并且复制也不利于代码的重用。微前端的出现就是为了解决这样的问题，它是一种由独立交付的多个前端应用组成整体的架构风格。具体的，将前端应用分解成一些更小、更简单的能够独立开发、测试、部署的小块，而在用户看来仍然是内聚的单个产品。

微前端开发的优势

• 没有框架的限制
• 每个微前端都可以拥有自己的git仓库和构建配置工具，这意味着每个微前端都可以独立构建和部署
• 更内聚，松耦合
• 增量开发方便

single-spa

single-spa就是一个微前端开发的一种解决方案

让我们现在全局安装

npm install --global create-single-spa
# or
yarn global add create-single-spa

执行以下命令

create-single-spa

按照交互，我们一步一步地创建我们的项目，解释一下每一步的意思

新项目的名字，这里因为我们是首次创建项目，所以我们需要一个容器来装我们的独立应用，所以我们可以取一个比较直观的名字

这里有三个选项

• single-spa应用（以vue，react，angular等主流开发框架为主体的应用，你甚至可以不用开发框架，用传统的开发方式来写）
• 公共工具
• single-spa容器（用来聚合项目下的每个独立的应用）

你可以选择你喜欢的包管理工具

组织名字，这个属性在注册组件时会用到

下一步我们的容器就生成好了，项目结构如下

可以看到有一个lzp-root-config的文件，这个文件就是我们项目容器的配置文件，lzp就是刚才填写的organization name

在container目录下运行yarn start或npm start项目就跑起来了 访问http://localhost:9000/

这个时候我们打开root-config

可以看到配置文件从single-spa中引入了两个方法registerApplication和startregisterApplication可以接受一个对象

• name: 字符串类型，“@组织名称/应用名称”
• app: 函数类型，返回promise，通过systemjs引用打包好的微前端应用模块
• activeWhen：路由匹配时激活应用 还可以使用 customProps来接收自定义参数，在生命周期钩子函数执行时会被作为参数传入

start:

必须在你single spa的配置中调用！在调用 start 之前, 应用会被加载, 但不会初始化，挂载或卸载。start 的原因是让你更好的控制你单页应用的性能。举个栗子，你想立即声明已经注册过的应用（开始下载那些激活应用的代码），但是实际上直到初始化AJAX（或许去获取用户的登录信息）请求完成之前不会挂载它们 。在这个例子里，立马调用 registerApplication 方法，完成AJAX后再去调用 start方法会获得最佳性能。这里的urlRerouteOnly表示是否可以通过history.pushState（）和history.replaceState（）更改触发single-spa路由

现在我们尝试新建两个应用react-demo和vue-demo运行create-single-spa

? Directory for new project react-demo/vue-demo
.......
? Select type to generate single-spa application/parcel

分别进入到这两个项目所在的根目录运行（我这里使用的yarn）yarn start和yarn serve

访问http://localhost:8081/和http://localhost:8082/

因为我们运行的是integrated模式，所以如果我们要访问这两个应用需要通过容器配置路由去访问，复制这两个链接

那么我们如何通过配置路由去访问这两个应用呢？打开container/src/index.ejs(ejs是一个模板引擎，实质上还是html)

????? 然后在这里找到了答案 https://github.com/single-spa/single-spa/issues/560 原因是需要将react相关的库添加到import map中

再次尝试访问

但是这里又发现了一个新问题，当我访问/vue时，react-demo应用也被加载进来了，原因是/vue也包含了/ 如果我想要访问/vue时不加载react-demo该怎么做呢？

activeWhen还可以接受一个函数参数为location 改写react-demo的注册配置

这样就可以实现了

总结

这里仅仅是介绍了single-spa最基础的内容，它的其他属性和事件也值得我们花时间去学习。

微前端开发的解决方案除了single-spa之外，热门的还有qiankun，mooc等解决方案，在开发当中应该了解每种解决方案各自的优缺点，再针对自身的业务来进行技术选型，希望大家都能找到合适的工具让自己的开发效率高起来。

兼听则明，偏听则暗。

如果我有什么理解得不对的地方，欢迎指正。