搭建 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

首發於語雀文檔