一、工程搭建

• 在搭建工程之前，先绘制下项目架构图：

  • 主要涉及功能如下：

  1. 主应用

  • 注册子应用
  • 加载、渲染子应用
  • 路由匹配（activeWhen, rules）
  • 获取数据（公共依赖，通过数据做鉴权处理）
  • 通信（父子通信，子父通信）

  2. 子应用的功能

  • 渲染
  • 监听通信（主应用传递过来的数据）

  3. 微前端框架

  • 子应用的注册
  • 初始化加载
  • 路由更新判断
  • 匹配对应的子应用
  • 加载子应用的内容
  • 完成所有依赖项的执行
  • 将子应用渲染在固定的容器内
  • 公共事件的管理
  • 异常的捕获和报错
  • 全局的状态管理的内容
  • 沙箱的隔离
  • 通信机制

  4. 服务端的功能

  • 提供数据服务

  5. 发布平台

  • 主子应用的打包和发布

• 架构图

二、应用工程构建

• 新建一个微前端工程 micro-frontend

• 创建相关子应用

  • 针对 vue 的工程，可以通过 vue-cli 进行创建工程

    vue create xxx

  • 针对 react 的工程，使用如下命令创建工程

    npx create-react-app xxx

  • 尝试启动每个子应用，验证是否运行成功。

• 构建启动所有子应用的脚本

  • 新建 build 文件夹，创建 run.js 脚本如下：

    // 利用 node 的 child_process 实现 [参考](http://nodejs.cn/api/child_process.html)
    const childProcess = require('child_process');
    const path = require('path');
    
    const filePath = {
        vue2: path.join(__dirname, '../vue2'),
        vue3: path.join(__dirname, '../vue3')
    }
    
    // cd 子应用的目录 npm stat 启动项目
    function runChildApplication() {
        Object.values(filePath).forEach(item => {
        // 这边注意 需要配置统一的启动命令 
        childProcess.spawn(`cd ${item} && npm run serve`, { stdio: 'inherit', shell: true })
        })
    }
    runChildApplication()

• 配置端口

  所有的子应用，都需要 规划 一个独有的端口，防止其他应用占用端口，导致运行失败。 规划：vue2：8081 vue3：8082 main: 9000

  • vue 工程 新建 vue.config.js 文件 配置如下：

    // 具体参考：https://cli.vuejs.org/zh/config/#vue-config-js
    // devServer 配置参考：https://webpack.js.org/configuration/dev-server/
    module.exports = {
      devServer: {
          port: 8082
      }
    }