从零开发——微前端框架实践

欢迎大家来到IT世界,在知识的湖畔探索吧!

点击链接阅读原文，获取更多技术内容：从零开发—微前端框架实践-阿里云开发者社区

我们对微前端框架的内容做了一个详细的介绍，并从零开始用Typescript实现了微前端的基本功能。

作者 | 孙晓淳(笑鹅)

来源 | 阿里开发者公众号

本文我们首先实现一个可进行子应用注册和资源加载的微前端框架，实现在一个vue3主应用中加载3个不同技术栈（vue2、react15、react16）的子应用，并且页面上渲染出各个子应用的内容；

欢迎大家来到IT世界,在知识的湖畔探索吧!

然后，我们对该微前端框架实现扩展，实现

• 运行环境隔离（沙箱）
• css样式隔离
• 应用间通讯（含父子通信、子应用间通信）
• 全局状态管理（全局store的简单使用）
• 利用应用缓存和预加载子应用提高加载性能

一、前置准备

再开发我们自己的微前端框架之前，我们需要做一定的架构设计准备。我们考虑微前端架构设计时的整体思路，并画出项目架构图。

1.1 微前端框架实现思路

• 采用路由分发式（本文使用的是hash模式）
• 主应用控制路由匹配和子应用加载，共享依赖加载
• 子应用做功能，并接入主应用实现主子控制和联动

1.2 分析框架& 项目架构图

首先分析需求：

1.主应用功能：

a.注册子应用；

b.加载、渲染子应用

c.路由匹配（activeWhen, rules- 由框架判断）

d.获取数据（公共依赖，通过数据做鉴权处理）

e.通信（父子通信、子父通信）

2.子应用功能：

a.渲染

b.监听通信（主应用传递过来的数据）

3.微前端框架功能

a.子应用的注册

b.有开始内容（应用加载完成）

c.路由更新判断

d.匹配对应的子应用

e.加载子应用的内容

f.完成所有依赖项的执行

g.将子应用渲染在固定的容器内

h.公共事件的管理

i.异常的捕获和报错

j.全局的状态管理的内容

k.沙箱的隔离

l.通信机制

4.服务端的功能：提供数据服务

整体项目架构图如下：

二、开发微前端框架

本节我们开始开发主子应用并且实现微前端框架的基础功能

* 首先，我们实现主子应用的开发：按照我们的实际项目需求进行子应用的搭建和改造工作，每种子应用改造的方式大同小异；并且开发主应用，主应用起着整体的调度工作，按照对应的路由匹配规则渲染对应的子应用

* 然后我们实现微前端框架的基础功能，包括：应用注册、路由拦截、主应用生命周期添加、微前端生命周期添加、加载和解析html及js、渲染、执行脚本文件等内容。

2.1 准备子应用

技术选型

本文采用Vue3技术栈开发主应用，并准备了3个不同技术栈的子应用：

• 子应用：
• vue2子应用（实现home主页）
• React15子应用（博客页）
• React16子应用（照片页）

项目目录结构

注：在开发微前端框架前，我们首先需要准备3个子应用，子应用的具体实现并非重点，完整代码可见：
blog-website-mircroFE-demo：
https://code.alibaba-inc.com/sunxiaochun.sxc/blog-website-mircroFE-demo，项目目录结构如下：

. ├── main 主应用 ├── micro 微前端框架 ├── vue2 子应用 ├── react15 子应用 ├── react16 子应用 └── README.md

欢迎大家来到IT世界,在知识的湖畔探索吧!

子应用改造接入微前端

当我们有了几个子应用后，需要对其进行一些改造，从而使其能接入微前端。

对于Vue2/3子应用，为其添加vue.config.js，配置关键点：设置devServer里的contentBase和headers允许跨域和output

欢迎大家来到IT世界,在知识的湖畔探索吧!// vue2/vue.config.js const packageName = 'vue2'; const port = 9004;// 设置端口号 module.exports = { outputDir: 'dist', // 打包的目录 assetsDir: 'static', // 打包的静态资源 filenameHashing: true, // 打包出来的文件，会带有hash信息 publicPath: 'http://localhost:9004', devServer: { contentBase: path.join(__dirname, 'dist'), hot: false, disableHostCheck: true, port, headers: { 'Access-Control-Allow-Origin': '*', // 本地服务的跨域内容 }, }, // 自定义webpack配置 configureWebpack: { output: { library: `${packageName}`,//设置包名，从而可以通过window.vue2获得子应用内容 libraryTarget: 'umd', }, }, };

对于react15/16子应用，改造webpack.config.js，注意修改webpack.config.js里的output和devServer

// react16/webpack.config.js const path = require('path') module.exports = { entry: { path: ['./index.js'] }, // +++ output: { path: path.resolve(__dirname, 'dist'), filename: 'react15.js', library: 'react15', libraryTarget: 'umd', umdNamedDefine: true, publicPath: 'http://localhost:9002/' }, devServer: { // 子应用配置本地允许跨域 headers: { 'Access-Control-Allow-Origin': '*' }, contentBase: path.join(__dirname, 'dist'), compress: true, port: 9002, historyApiFallback: true, hot: true, } }

设置启动脚本

当新建好3个子应用后，我们的目录结构是这样的

欢迎大家来到IT世界,在知识的湖畔探索吧!. ├── build 全局启动脚本 ├── main 主应用 ├── vue2 子应用 ├── react15 子应用 ├── react16 子应用 ├── package.json 定义start启动脚本 └── README.md

以启动react16子应用为例，cd react16 &&yarn start 只能启动单个react子应用，我们需要配置一个命令来一次性启动所有子项目：

// package.json "scripts": { // 在根目录的package.json配置start命令 "start": "node ./build/run.js" }

欢迎大家来到IT世界,在知识的湖畔探索吧!// build/run.js const childProcess = require('child_process') const path = require('path'); const filePath = { vue2:path.join(__dirname,'../vue2'), react15:path.join(__dirname,'../react15'), react16:path.join(__dirname,'../react16'), } // cd 子应用目录；npm start启动项目 function runChild(){ Object.values(filePath).forEach(item =>{ childProcess.spawn(`cd ${item} && yarn start`,{stdio:"inherit",shell:true}); }) } runChild();

这样，在根目录下执行yarn start即可一次性启动3个子应用

2.2 主应用开发

主应用负责所有子应用的卸载、更新和加载整个流程，主应用是链接子应用和微前端框架的工具。

构建主应用基本页面

主应用需要负责整体页面布局，使用vue3开发主应用main，其主体框架如下：

可以看到，主应用在页面中设置了一个子应用的容器

，在这个区域中，我们展示不同的子应用内容。

剩余60%，完整内容请点击下方链接查看：从零开发—微前端框架实践-阿里云开发者社区

阿里云开发者社区，千万开发者的选择。百万精品技术内容、千节免费系统课程、丰富的体验场景、活跃的社群活动、行业专家分享交流，尽在：阿里云开发者社区-云计算社区-阿里云