將多個可獨立交付的應(yīng)用組合成一個更大的應(yīng)用。

簡而言之恒界，微型前端就是將大而恐怖的東西切成更小十酣，更易于管理的部分际长，然后明確地表明它們之間的依賴關(guān)系。我們的團(tuán)隊以及我們的發(fā)布流程都應(yīng)該能夠彼此獨立地運行和發(fā)展工育，而無需過多的協(xié)調(diào)。

這是架構(gòu)方案：
1 應(yīng)用容器嘱朽，承載子應(yīng)用
2 子應(yīng)用，統(tǒng)一的應(yīng)用接口
3 react版本一致稀轨，antd的版本一致最好岸军，基于react的hook，配合rxjs做響應(yīng)式艰赞。

image.png

其中有個模塊服務(wù)和菜單服務(wù)方妖，這其實是為業(yè)務(wù)服務(wù)的，和微前端架構(gòu)沒什么聯(lián)系趁蕊，你們可以不要仔役。

image.png

這是一個架構(gòu)設(shè)計方案，還需要精細(xì)的代碼實現(xiàn)任柜，接下來我會將大部分核心代碼貼出來沛厨。

這是應(yīng)用最開始的部分，start為微前端啟動程序宅粥，傳遞兩個參數(shù)电谣，設(shè)置主頁，微前端所有子應(yīng)用的配置企垦，每個子應(yīng)用必須包含一個入口文件晒来。一下是我的示例代碼：

import start from './core/start';
import './index.less';
import { getApplicationContainer } from "./core/service/get-application-container";
import testData from './testData';

start({
    homePage: '/root/application/list',
    microFrontendConfig: [{
        version: '1.0.1',
        appName: 'root',
        appPath: 'root',
        resource: {
            js: ['/static/js/microfrontend.js']
        }
    }]
}).then(function () {
    // 處理好菜單的業(yè)務(wù)邏輯
    const applicationContainer = getApplicationContainer();
    let service = applicationContainer.moduleService;
    service.setModulesOptions(testData.modulesData);
    service.setModulesData(testData.modulesData);
    service.setCurrentModule(testData.modulesData[0]);

    // 根據(jù)當(dāng)前module去設(shè)置當(dāng)前的菜單
    service.obCurrentModule.subscribe((module) => {
        const menuService = applicationContainer.menuServie;
        if (module) {
            let menuObj = testData.menusData.filter(item => item.moduleCode === module.moduleCode);
            menuService.setMenusData(menuObj[0]?.menus);
        }
    });
});