说明
此次实践对比相对知名的框架:single-spa,icestark,qiankun
其中在微前端这篇文章中我们可以看到,icestark,qiankun,Magix三个都是阿里旗下的产物,分别由baba和mama实现。下边将对各个框架逐一踩坑开始之前,我先从stateofjs找了排前三的前端框架作为子项目
single-spa类型:application / parcel:同属UI层,区别是前者为特定路由渲染微前端UI,后者不受路由限制(通用组件UI)
utility module (styleguide, api cache, etc):逻辑层,暴露(通用)共享逻辑(helpers…)
root config:微应用入口配置(至少得有一个)。包括一个被所有single-spa应用共享的html文件和一个注册子应用的js文件,当然二者是可以合并成一个文件的,即可以在一个html里完成所有配置。
新项目接入整个新建过程使用create-single-spa命令生成脚手架代码,请npm install -g create-single-spa先
1. 创建俩不同框架的applicationmkdir single-spa-demo && cd single-spa-demo && mkdir apps && cd apps
create-single-spa react-app
create-single-spa vue-app
2. 创建root-config