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

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

作者 | 孙晓淳(笑鹅)

来源 | 阿里开发者公众号

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

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

一、前置准备

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

1.1 微前端框架实现思路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个不同技术栈的子应用：

项目目录结构

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

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

子应用改造接入微前端

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

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

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

.
├── 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.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%，完整内容请点击下方链接查看：从零开发—微前端框架实践-阿里云开发者社区

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