微前端框架 single-spa & 模块联邦实现微应用

回忆一下上篇：

《微前端落地：Systemjs模块化解决方案》

微前端框架 single-spa：

zh-hans.single-spa.js.org/

single-spa：single-spa.js.org/ 是一个实现微前端架构的框架。在 single-spa 框架中有三种类型的微前端应用：

1. single-spa-application / parcel：微前端架构中的微应用，可以使用 vue、react、angular 等框架。

2. single-spa root config：创建微前端容器应用。

3. utility modules：公共模块应用，非渲染组件，用于跨应用共享 javascript 逻辑的微应用。

创建容器应用

安装 single-spa 脚手架工具：npm installcreate-single-spa@2.0.3 -g

创建微前端容器应用：create-single-spa

1. 应用文件夹填写 container

2. 应用选择 single-spa root config

3. 组织名称填写 study

组织名称可以理解为团队名称，微前端架构允许多团队共同开发应用，组织名称可以标识应用由哪个团队开发。

应用名称的命名规则为@组织名称/应用名称，比如@study/todos。

4. 启动应用：cd ./singletest && npm start

5. 访问应用：localhost:9000

容器默认代码解析

src/xx-root-config.js

index.ejs

（一）创建基于 React 的微应用

1、创建 React 微应用

创建应用：create-single-spa，注意组织及项目名字，后面注册微应用是会用到：

1. 应用目录输入 todos

2. 框架选择 react

修改应用端口 && 启动应用

启动应用：npm start

2、注册应用

将 React 项目的入口文件注册到基座应用 (容器应用) 中

\container\src\study-root-config.js：

指定微前端应用模块的引用地址：

（可以直接访问对应应用服务器，有提示 URL 加载地址）

指定公共库的访问地址，默认情况下，应用中的 react 和 react-dom 没有被 webpack 打包， single-spa 认为它是公共库，不应该单独打包。

修改默认应用代码，已独立页面展示应用内容

container\src\study-root-config.js

3、指定应用渲染位置

micro\container\src\index.ejs

micro\todos\src\study-todos.js

4、React 应用代码解析

micro\todos\src\study-todos.js

5、React 微前端路由配置

准备好两个路由组件

micro\todos\src\home.js &µ\todos\src\about.js

micro\todos\src\root.component.js

路由文件已公共模块引入，\micro\container\src\index.ejs

修改 webpack 配置文件，排除路由模块打包，micro\todos\webpack.config.js

（二）创建基于 Vue 的微应用

1、创建应用

创建应用：create-single-spa

1. 项目文件夹填写 realworld

2. 框架选择 Vue

3. 生成 Vue 2 项目

因为 vue && vue-router 需要通过公共模块打包，所以，在应用内部需要配置不打包

micro\realworld\vue.config.js

修改项目启动命令：micro\realworld\package.json

注册应用：micro\container\src\study-root-config.js

micro\container\src\index.ejs

加载 vue && vue-router

导入应用，应用地址可以直接访问应用后，在浏览器的提示中获取。

2、应用路由配置

\micro\realworld\src\main.js

micro\realworld\src\App.vue

（三）创建 utility modules

1、utility 独立应用创建

用于放置跨应用共享的 JavaScript 逻辑，它也是独立的应用，需要单独构建单独启动。

1. 创建应用：create-single-spa

1） 文件夹填写 tools

2 ） 应用选择 in-browser utility module(styleguide, api cache, etc)

2. 修改端口，启动应用, \micro\tools\package.json

导出公共方法：micro\tools\src\study-tools.js

在模板文件中声明应用模块访问地址 : micro\container\src\index.ejs

2、在 React 应用中使用该方法

MicroFrontends\micro\todos\src\about.js

3、在 Vue 应用中使用该方法

micro\realworld\src\main.js

micro\realworld\src\components\Foo.vue

模块联邦实现微应用

1、基础构建-React

基础应用代码安装

基础代码：

2、基础配置 webpack.config.js

package.json 启动命令：

3、导出微应用

4、导入应用模块

在组件中使用

5、模块联邦实现 Vue3.0 微前端架构

完整代码示例：modulefederationvue3: 基于模块联邦实现的 Vue3.0 微前端架构示例 (gitee.com)

地址：gitee.com/xilinglaosh…

package.json

1）在 home 应用中导出模块

home\webpack.config.js

2） 在 layout 应用中导入

layout\webpack.config.js

layout\src\views\About.vue

写好基础代码及对应配置后，分别启动 home 及 layout 两个应用项目就可以在 layout 应用的 about 看到 home 应用中的 User 组件的内容了。