Antd Pro项目接入qiankun微前端

在开始之前，请先提前了解微前端相关概念
场景:

antd pro项目中接入qiankun，抽离其中某个模块作为子应用

一、项目技术

• Ant Design Pro
• UmiJS
• webpack
• ts
  其他用到的根据实际情况而定

二、@umijs/plugin-qiankun

在开始做的时候先去了解了一些开源的微前端插件，最后决定使用阿里的qiankun，正好umi里面内置了一个qiankun的插件

如果使用 antdpro+umi+qiankun的架构做微前端，那就直接去看umi的官方文档，了解相关配置

三、主应用配置

项目配置之前先浏览一遍官方的配置案例，下面说的的内容仅是我在项目中使用到的

1、安装依赖

yarn add @umijs/plugin-qiankun -D

2、注册子应用

// 根目录config文件夹下的config.ts
// 在导出的defineConfig里面添加

  qiankun: {
    master: { 
      {
        name: 'app1', // 唯一 id
        entry: '//localhost:9001', // html entry
        props: {}, // 传递子应用的参数
      },
    },
  },
1
2
3
4
5
6
7
8
9
10
11
12

• 如果有多个子应用，就在master下面注册多个
• 可以在根目录下面新建.env文件来指定启动端口

PORT=9001

3、添加访问子应用的路由

主应用配置一个菜单路由，内容是访问子应用的具体页面的路由

     {
        path: '/project/development/index',
        name: 'dataDevelopment',
        microApp: 'app1',  // 和上面注册子应用的唯一id对应起来
      }, 
1
2
3
4
5

4、修改主应用中document.ejs文件中的根id，防止跳转子应用一直处于页面加载状态

<div id="root">
  
// id修改为动态的 
<div id="<%= context.config.mountElementId %>">
// 在根目录下config/config.ts中加一个mountElementId属性和值
1
2
3
4
5

四、子应用配置

1、安装依赖

yarn add @umijs/plugin-qiankun -D

2、注册插件

// 根目录config文件夹下的config.ts
// 在导出的defineConfig里面添加

 qiankun: {
    slave: {},
 },
 base: '/',   // 这个如果不加的话，页面路由会自动拼上子应用package.json中name的内容
1
2
3
4
5
6
7

3、 配置运行时生命周期钩子

// 根目录下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);
  },
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

4、路由存在

保证子应用路由里面存在主应用里面注册的地址

五、父子应用传值通信

1、配合 useModel 使用（推荐）

需确保已安装 @umijs/plugin-model 或 @umijs/preset-react

• 主应用中
  在src/app.ts里导出一个 useQiankunStateForSlave函数，函数的返回值将作为 props 传递给微应用

// src/app.ts
// qiankun传递给子应用的参数
export function useQiankunStateForSlave() {
  const [masterState, setMasterState] = useState({});

  return {
    masterState,
    setMasterState,
  };
}
1
2
3
4
5
6
7
8
9
10

• 子应用中
  子应用中会自动生成一个全局 model，可以在任意组件中获取主应用透传的 props 的值。

2、基于props传递

这种方式主要是在主应用中注册子应用的时候，同步加一个props的属性，上面注册子应用的时候我代码里面我已经提到了

子应用直接在app.ts中配置的生命周期钩子中获取 props 消费数据（参考上面子应用的配置）

3、组件共享

• 关于组件共享可以考虑npm包 的形式来解决
  • 搭建npm私有服务器
  • 组件库搭建

4、使用qiankun官网提供的Actions通信

看另一篇actions通信补充

六、线上主应用访问子应用跨域

通过nginx配置允许子应用被访问的域名

• 以抽离出来的模块为例
• 在nginx里面添加

    # 配置允许被xxxxx.com跨域访问
    add_header Access-Control-Allow-Origin xxxxx.com; 
 
1
2
3