将多个可独立交付的应用组合成一个更大的应用。
简而言之,微型前端就是将大而恐怖的东西切成更小,更易于管理的部分,然后明确地表明它们之间的依赖关系。我们的团队以及我们的发布流程都应该能够彼此独立地运行和发展,而无需过多的协调。
这是架构方案:
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);
}
});
});
网友评论