qiankun 是一個(gè)基于 single-spa 的微前端實(shí)現(xiàn)庫(kù)
umi 插件，提供了 @umijs/plugin-qiankun 供 umi 應(yīng)用一鍵切換成微前端架構(gòu)系統(tǒng)。

搭建主應(yīng)用

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

注冊(cè)qiankun

config.js 添加qiankun配置項(xiàng)

qiankun: {
    master: {
      // 注冊(cè)子應(yīng)用信息
      apps: [
        {
          name: 'app1', // 唯一 id
          entry: '//localhost:8081', // html entry
        },
      ],
    //   jsSandbox: true, // 是否啟用 js 沙箱，默認(rèn)為 false
    //   prefetch: true, // 是否啟用 prefetch 特性，默認(rèn)為 true
    },
  },

引用子應(yīng)用

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

{
  name: 'app1',
  path: '/app1',
  microApp: 'app1', // 對(duì)應(yīng)上一步注冊(cè)中的name
},

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

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

搭建子應(yīng)用

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

注冊(cè)qiankun

config.js 添加qiankun配置項(xiàng)

  qiankun: {
    slave: {}
  }

注冊(cè)鉤子 src/app.ts

export const qiankun = {
    // 應(yīng)用加載之前
    async bootstrap(props) {
      console.log('app1 bootstrap', props);
    },
    // 應(yīng)用 render 之前觸發(fā)
    async mount(props) {
      console.log('app1 mount', props);
    },
    // 應(yīng)用卸載之后觸發(fā)
    async unmount(props) {
      console.log('app1 unmount', props);
    },
  };

排坑

在config.js 中注冊(cè)qiankun后運(yùn)行項(xiàng)目，觀察到react項(xiàng)目被渲染到了id為root-master/root-slave 的DOM節(jié)點(diǎn)，而非antdpro默認(rèn)的id為root的DOM節(jié)點(diǎn)，然而在最新版本的antdpro中，#root節(jié)點(diǎn)已經(jīng)被寫了一些預(yù)設(shè)樣式，如height:100% ，會(huì)將開啟qiankun后的真正的應(yīng)用試圖“擠”到視窗下方，影響體驗(yàn)。

DOM結(jié)構(gòu)

所以需要將相關(guān)的預(yù)設(shè)樣式清除，需要調(diào)整的地方有src/document.ejs，src/global.less

然后便可以繼續(xù)愉快的玩耍了。

通信

主項(xiàng)目

• 使用路由方式引用的

主項(xiàng)目新建 src/app.ts

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

其中state的值可以自己定義。但是，由于app.ts 沒有在<Provider> 內(nèi)部，所以無(wú)法通過(guò)useSelector和useDispatch來(lái)獲取主應(yīng)用model中的值和dispatch方法。

• 使用組件方式引用的

通過(guò)props傳值

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

子項(xiàng)目

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

思考

• 在實(shí)際業(yè)務(wù)中，子項(xiàng)目承擔(dān)什么角色？ 一整套應(yīng)用 or 僅展示層？
• 基礎(chǔ)配置如何共享（如鑒權(quán)/用戶信息）

for umi2

使用上個(gè)版本的qiankun插件
https://github.com/umijs/umi-plugin-qiankun