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

blueju

前言

首发于 语雀文档@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
    });
  });

效果

image.png

GitHub

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

阅读 1.1k
20 声望
3 粉丝
0 条评论
你知道吗?

20 声望
3 粉丝
宣传栏