qiankun & @umijs/plugin-qiankun实

qiankun 是一个基于 single-spa 的微前端实现库
umi 插件，提供了 @umijs/plugin-qiankun 供 umi 应用一键切换成微前端架构系统。

搭建主应用

yarn create umi
yarn add @umijs/plugin-qiankun -D

注册qiankun

config.js 添加qiankun配置项

qiankun: {
    master: {
      // 注册子应用信息
      apps: [
        {
          name: 'app1', // 唯一 id
          entry: '//localhost:8081', // html entry
        },
      ],
    //   jsSandbox: true, // 是否启用 js 沙箱，默认为 false
    //   prefetch: true, // 是否启用 prefetch 特性，默认为 true
    },
  },

引用子应用

• 使用路由的方式
  config.js 的 router 配置中添加

{
  name: 'app1',
  path: '/app1',
  microApp: 'app1', // 对应上一步注册中的name
},

• 使用组件的方式
  在组件中

import { MicroApp } from 'umi';
export function MyPage() {
  
  return (
    <div>
      <div>
        <MicroApp name="app1" /> 
      </div>
    </div>
  )
}

搭建子应用

yarn create umi
yarn add @umijs/plugin-qiankun -D

注册qiankun

config.js 添加qiankun配置项

  qiankun: {
    slave: {}
  }

注册钩子 src/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);
    },
  };

排坑

在config.js 中注册qiankun后运行项目，观察到react项目被渲染到了id为root-master/root-slave 的DOM节点，而非antdpro默认的id为root的DOM节点，然而在最新版本的antdpro中，#root节点已经被写了一些预设样式，如height:100% ，会将开启qiankun后的真正的应用试图“挤”到视窗下方，影响体验。

DOM结构

所以需要将相关的预设样式清除，需要调整的地方有src/document.ejs，src/global.less

然后便可以继续愉快的玩耍了。

通信

主项目

• 使用路由方式引用的

主项目新建 src/app.ts

// src/app.ts
export function useQiankunStateForSlave() {
  const [masterState, setMasterState] = useState({});
 
  return {
    masterState,
    setMasterState,
  }
}

其中state的值可以自己定义。但是，由于app.ts 没有在<Provider> 内部，所以无法通过useSelector和useDispatch来获取主应用model中的值和dispatch方法。

• 使用组件方式引用的

通过props传值

function MyPage() {
  const [name, setName] = useState(null);
  return <MicroApp name={name} onNameChange={newName => setName(newName)} />
}

子项目

import { connectMaster } from 'umi';
function MyPage(props) {
  return <div>{ JSON.strigify(props) }</div>;
}
export default connectMaster(MyPage);

思考

• 在实际业务中，子项目承担什么角色？ 一整套应用 or 仅展示层？
• 基础配置如何共享（如鉴权/用户信息）

for umi2

使用上个版本的qiankun插件
https://github.com/umijs/umi-plugin-qiankun