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

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

作者 | 孙晓淳(笑鹅)

来源 | 阿里开发者公众号

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

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

• 运行环境隔离（沙箱）
• 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

子应用改造接入微前端

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

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

// vue2/vue.config.jsconst 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.jsconst 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个子应用后，我们的目录结构是这样的

.├── 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"}

// build/run.jsconst 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，其主体框架如下：

<!--main/src/App.vue --><template>  <MainNav />  <div class="sub-container">    <Loading v-show="loading" />    <div v-show="!loading" id="micro-container">子应用内容</div>  </div>  <Footer /></template>

可以看到，主应用在页面中设置了一个子应用的容器<div id="micro-container">子应用内容</div>，在这个区域中，我们展示不同的子应用内容。

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

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