umi + qiankun 动态注册子应用解决方案

前言

首发于 语雀文档@blueju

本篇文章可以被视为上一篇文章（https://www.yuque.com/blueju/blog/huuie8）的延续，上一篇文章大致讲述了搭建一个简易微前端平台的过程，其中关于子应用注册的配置是通过硬编码的方式，在构建打包前写入的。


但是真实项目中，更需要的是动态注册子应用，比如说我正参与的这个项目。


本篇文章的示例代码是基于上一篇文章示例代码改动的，上一篇文章示例代码对应的 GitHub 地址是：https://github.com/blueju/umi-qiankun/tree/umi-micro-fe-platform


代码修改集中在主应用，子应用不需要修改代码。

删除之前直接写死的子应用注册配置

官网文档中缺少该部分配置。
以下代码中，- 代表删除该行。
config/config.ts

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

配置Mock

在 mock 文件夹下新建 config.ts，写入以下代码：

export default {
    
    
  '/api/config': {
    
    
    apps: [
      {
    
    
        name: 'sub-app-1',
        entry: '//localhost:8001',
      },
    ],
  },
};

配置运行时动态注册子应用

参考：
https://umijs.org/zh-CN/plugins/plugin-qiankun#b-运行时动态配置子应用（srcappts-里开启）
个人认为 Umi 官网中的写法并不是那么好懂。

在 src 文件夹下新建 app.ts，写入以下代码：

// 从接口中获取子应用配置，export 出的 qiankun 变量是一个 promise
export const qiankun = fetch('/api/config')
  .then((res) => {
    
    
    return res.json();
  })
  .then(({
    
     apps }) => {
    
    
    return Promise.resolve({
    
    
      // 注册子应用信息
      apps,
      // 完整生命周期钩子请看 https://qiankun.umijs.org/zh/api/#registermicroapps-apps-lifecycles
      lifeCycles: {
    
    
        afterMount: (props) => {
    
    
          console.log(props);
        },
      },
      // 支持更多的其他配置，详细看这里 https://qiankun.umijs.org/zh/api/#start-opts
    });
  });

效果

GitHub

https://github.com/blueju/umi-qiankun/tree/runtime-dynamic-register-sub-app