マイクロフロントエンドqiankunとant-design-proの実践経験

4641 ワード
4月に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にmicroSubAppddとしてidを追加するDOMマウントポイントを選択します.大体のコードは以下の通りです.
....
  return (
     [
        {
          path: '/',
          breadcrumbName: formatMessage({
            id: 'menu.home',
          }),
        },
        ...routers,
      ]}
      itemRender={(route, params, routes, paths) => {
        const first = routes.indexOf(route) === 0;
        return first ? (
          {route.breadcrumbName}
        ) : (
          {route.breadcrumbName}
        );
      }}
      rightContentRender={() => (
        
      )}
      menuItemRender={(menuItemProps, defaultDom) => {
        if (menuItemProps.isUrl || menuItemProps.children || !menuItemProps.path) {
          return defaultDom;
        }

        return {defaultDom};
      }}      
    >
      
        {children}
      
      

    
  );
....

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のバージョンに注意する必要があります.私の側のサブアプリケーションはumi 2.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に変更する回避
//   
   


 
 
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 
 
 
       2.4       
 
 
4.         ，           
 
 
    start     ，      DOM   start
Androidでのpx、dp、spの違い
js常用工具類