搭建 umi + qiankun + antd 的微前端平台

关键词：

• umi
• qiankun
• ant design pro
• 非动态注册子应用
• 非动态装载子应用（路由）

背景

银行项目，需要一个前端中台，承载各项目组开发的应用，本篇文章是在工作实践后所写，还是具有一定可借鉴性的，至于官网已经有相关内容还专门写这么一篇，还是因为在实践中官网中的部分不完善，导致搭建过程异常坎坷。

搭建主应用工程

主应用一般都是类后管平台，因此我使用 ant-deisng-pro 做主应用，使用以下命令创建：

参考：https://pro.ant.design/index-cn（页面底部）

yarn create umi main-app

ant-design-pro
pro v4
ts
simple
antd@4

搭建子应用工程

使用以下命令创建：

yarn create @umijs/umi-app sub-app-1

主应用

安装qiankun

yarn add qiankun

安装@umijs/plugin-qiankun

yarn add @umijs/plugin-qiankun -D

注册子应用

参考：
https://umijs.org/zh-CN/plugins/plugin-qiankun#a-插件构建期配置子应用

在 config/config.ts 文件中，仿照以下代码进行添加：

子应用的工程名称是：sub-app-1
子应用的端口是：8001

{
  ...
  qiankun: {
    master: {
      apps: [
        {
          name: 'sub-app-1',
          entry: '//localhost:8001',
        },
      ],
    },
  },
}

装载子应用（路由）

现在还差个指向子应用的路由。
在 config/config.ts 文件中，仿照以下代码，在 routes 属性下进行添加：

{
  name: 'sub-app-1',
  icon: 'smile',
  path: '/sub-app-1',
  microApp: 'sub-app-1',
},

示例文件

担心大家不会，此处还提供一个在已经配置好了的 config/config.ts 文件。
config.ts

子应用

安装@umijs/plugin-qiankun

yarn add @umijs/plugin-qiankun -D

注册刚安装的插件

参考：
https://umijs.org/zh-CN/plugins/plugin-qiankun#第一步：插件注册（configjs）

在 .umirc.ts 文件中添加以下代码：

qiankun: {
 slave: {}
}

添加后如下：

import { defineConfig } from 'umi';

export default defineConfig({
  nodeModulesTransform: {
    type: 'none',
  },
  routes: [
    { path: '/', component: '@/pages/index' },
  ],
  qiankun: {
   slave: {}
  }
});

修改工程名称

打开 package.json 文件，在第一行添加属性 name 及相应属性值。

导出相应生命周期钩子

参考：
https://umijs.org/zh-CN/plugins/plugin-qiankun#第二步：配置运行时生命周期钩子（可选）

在 src/app.ts 中添加以下代码，app.ts 如果不存在则需要自行创建：

export const qiankun = {
  // 应用加载之前
  async bootstrap(props) {
    console.log('app1 bootstrap', props);
  },
  // 应用 render 之前触发
  async mount(props) {
    console.log('app1 mount', props);
  },
  // 应用卸载之后触发
  async unmount(props) {
    console.log('app1 unmount', props);
  },
};

效果

主应用效果

子应用效果

Github源代码

https://github.com/blueju/umi-mirror-docs/tree/umi-micro-fe-platform

结语

以上配置均不是动态注册子应用、动态装载子应用（路由），但现实项目中更多需要的是动态注册子应用、动态装载子应用（路由）。

TODO

• 写一篇如何动态注册子应用、动态装载子应用（路由）的blog

首发于语雀文档