基于react+antd+rxjs的大型admin系统的微前端方案

将多个可独立交付的应用组合成一个更大的应用。

简而言之，微型前端就是将大而恐怖的东西切成更小，更易于管理的部分，然后明确地表明它们之间的依赖关系。我们的团队以及我们的发布流程都应该能够彼此独立地运行和发展，而无需过多的协调。

这是架构方案：
1 应用容器，承载子应用
2 子应用，统一的应用接口
3 react版本一致，antd的版本一致最好，基于react的hook，配合rxjs做响应式。

image.png

其中有个模块服务和菜单服务，这其实是为业务服务的，和微前端架构没什么联系，你们可以不要。

image.png

这是一个架构设计方案，还需要精细的代码实现，接下来我会将大部分核心代码贴出来。

这是应用最开始的部分，start为微前端启动程序，传递两个参数，设置主页，微前端所有子应用的配置，每个子应用必须包含一个入口文件。一下是我的示例代码：

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 () {
    // 处理好菜单的业务逻辑
    const applicationContainer = getApplicationContainer();
    let service = applicationContainer.moduleService;
    service.setModulesOptions(testData.modulesData);
    service.setModulesData(testData.modulesData);
    service.setCurrentModule(testData.modulesData[0]);

    // 根据当前module去设置当前的菜单
    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);
        }
    });
});