umi子应用集成到基于single-spa的微前端（实现一个umi插件）

背景

项目微前端是基于single-spa, 子应用是用umi创建。 umi框架现在是在内部控制的render。这样基座没有办法在mount的时候，render 子应用。

目的

希望umi+antd这种中后台系统可以接入咱们自己的微前端基座。

解决方案

利用umi提供的强大的插件机制 umi插件

1. 基于single-spa的子应用需要导出生命周期,并且在生命周期mount时候，调用clientRender函数

   api.addEntryCode(() => {
    return `import ReactDOM from 'react-dom';
    export const bootstrap = () => { console.log('bootstrap child system');}
    export const mount = () => {
      console.log('mount child system');
      ReactDOM.render(
        clientRender(),
        document.getElementById('root')
      );
    }
    export const unmount = () => { console.log('unmount child system')}
    window.unmount = unmount`
     });

2. 需要导出成umd格式

   api.chainWebpack((conf, { webpack }) => {
    const appName = api.userConfig.microConfig.name;
    const isWebpack5 = webpack.isWebpack5;
    conf.output.libraryTarget('umd');
    conf.output.library(appName);
    if (!isWebpack5) {
      conf.output.jsonpFunction(`webpackJsonp_${appName}`);
    }
    return conf;
     });

3. umi项目在微前端环境下，挂载到空dom上

   let isSubApp = true; // 是否在微应用
   export function modifyClientRenderOpts(memo) {
     return {
        ...memo,
        rootElement: isSubApp ? '' : memo.rootElement,
    }
   };

   ---

   以上是我粗略的分析和思考，代码发到这里了。
   https://www.npmjs.com/package...
   欢迎大家一起交流一下。