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: {}, // 傳遞子應用的參數
      },
    },
  },
           

• 如果有多個子應用，就在master下面注冊多個
• 可以在根目錄下面建立.env檔案來指定啟動端口

PORT=9001

3、添加通路子應用的路由

主應用配置一個菜單路由，内容是通路子應用的具體頁面的路由

{
        path: '/project/development/index',
        name: 'dataDevelopment',
        microApp: 'app1',  // 和上面注冊子應用的唯一id對應起來
      }, 
           

4、修改主應用中document.ejs檔案中的根id，防止跳轉子應用一直處于頁面加載狀态

<div id="root">
  
// id修改為動态的 
<div id="<%= context.config.mountElementId %>">
// 在根目錄下config/config.ts中加一個mountElementId屬性和值
           

四、子應用配置

1、安裝依賴

yarn add @umijs/plugin-qiankun -D

2、注冊插件

// 根目錄config檔案夾下的config.ts
// 在導出的defineConfig裡面添加

 qiankun: {
    slave: {},
 },
 base: '/',   // 這個如果不加的話，頁面路由會自動拼上子應用package.json中name的内容
           

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);
  },
};
           

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,
  };
}
           

• 子應用中

  子應用中會自動生成一個全局 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;