微前端qiankun和ant-design-pro的实践经历

四月份启动了一个ERP项目，基础架构设计采用了微前端（qiankun）+ ant-design-pro，开始一时爽，后面火葬场，这里记录一下这次实践的过程。直接看DEMO点这里

1. 创建主应用

1.1 通过umi 初始化 ant-design-pro

// 通过umi初始化项目 
npm create umi
...

1.2 安装qiankun

npm i --save qiankun

1.3 添加初始化的项目中的src目录下添加app.js用来注册子应用

import { registerMicroApps } from 'qiankun';
  registerMicroApps(
    [
      {
       name: 'microSubA',
       entry: '//localhost:8002',
       container: '#microSubApp',
       activeRule: '/microSubA',
       props: {
         parentHistory: history
       }
      },
      {
        name: 'microSubB',
        entry: '//localhost:8001',
        container: '#microSubApp',
        activeRule: '/microSubB',
        props: {
          parentHistory: history
        }
      }
    ],
  )

1.4 在Layout中添加子应用挂载点，这里选择了Layout中BasicLayout.jsx中添id为microSubAppdd的DOM挂载点，大致代码如下:

....
  return (
    <ProLayout
      navTheme="light" 
      menuHeaderRender={false}
      menuDataRender={menuDataRender}
      onCollapse={handleMenuCollapse}
      {...props}
      {...settings}
      breadcrumbRender={(routers = []) => [
        {
          path: '/',
          breadcrumbName: formatMessage({
            id: 'menu.home',
          }),
        },
        ...routers,
      ]}
      itemRender={(route, params, routes, paths) => {
        const first = routes.indexOf(route) === 0;
        return first ? (
          <Link to={paths.join('/')}>{route.breadcrumbName}</Link>
        ) : (
          <span>{route.breadcrumbName}</span>
        );
      }}
      rightContentRender={() => (
        <DateTip />
      )}
      menuItemRender={(menuItemProps, defaultDom) => {
        if (menuItemProps.isUrl || menuItemProps.children || !menuItemProps.path) {
          return defaultDom;
        }

        return <Link to={menuItemProps.path}>{defaultDom}</Link>;
      }}      
    >
      <Authorized authority={authorized.authority} noMatch={noMatch}>
        {children}
      </Authorized>
      <div id="microSubApp" />
    </ProLayout>
  );
....

1.5 等Layout渲染完成，调用qiankun的start()启动qiankun，在BasicLayout.jsx中添加start启动

  useEffect(() => {
    if (dispatch) {
      start({
        sandbox: false,
      });
    }
  }, []);

到这里完成了主应用的添加，下面开始添加子应用

2. 子应用添加

2.1 初始化一个ant-design-pro项目
2.2 子应用不需要使用qiankun，只需在app.js中导出qiankun需要的生命周期就可以了。因为我们使用的umi相关，这里需要使用umi-plugin-qiankun插件，这个需要注意自己umi的版本，我这边子应用是umi2.x版本，所以安装的插件是"@umijs/plugin-qiankun": "^1.3.2"
2.3 修改子应用的config.js相关的配置信息

// 在plugins中添加插件的使用 umi2.x才需要手动载入
const plugins = [
 ['@umijs/plugin-qiankun'],
  ....
]
// 添加如下配置
export defualt {
  // 这里microSubA就是子应用的名称 
  ...
  publicPath: '/microSubA/',
  base: '/microSubA',
  mountElementId: 'root-slave',      // 子应用自己渲染的DOM节点
}

2.4 修改src/pags/document.ejs把子应用的挂载点修改为config中配置的mountElementId避免

// 默认<div id="root">修改为
<div id="<%= context.config.mountElementId %>">

2.5 修改该package.json中name为子应用的名称

到这里我们已经用qiankun和ant-design-pro实现了微前端架构，下面列举一些常见的问题。

常见问题

一定要仔细看官网的常见问题，大部分遇到的问题都可以解决，https://qiankun.umijs.org/zh/faq/#application-died-in-status-loading-source-code-you-need-to-export-the-functional-lifecycles-in-xxx-entry

1. "Application died in status LOADING_SOURCE_CODE: You need to export the functional lifecycles in xxx entry"

这个是一个最最最常见的问题，可能每个人遇到它的方式都不同，我是加载第一个子应用正常，加载第二个子应用报这个错误，最后发现是子应用的package.json中的name一样了

2. 第二次访问同一个子应用总是被重定向到离开之前的子应用页面

这个应该是qiankun1.x会有的问题，使用qiankun2.0

3. 子应用启动报：AssertionError [ERR_ASSERTION]: Document src/pages/document.ejs must contain <div id="root-slave">

确实一下上面的2.4步骤是否设置了

4. 启动相关没有报错，但就是没有加载出子应用

检测一下start调用了没有，子应用挂载的DOM是否在start调用的时候已经渲染好了