microfront-end-single-spa

利用single-spa搭建的一个微前端架构，其中各个小型应用具有独立部署、独立运行、允许存在独立仓储的特性。由portal项目实现各个应用的组合

主要技术

不依赖三大框架，自定义webpack打包配置
集成systemJS，用于引入子模块打包后的js文件(例如bundle.js)
提供路由分发功能，具体请见/portal/src/config和/portal/src/activityFns，用于控制懒加载模块js文件，例跳转到project2项目时，才开始加载project2打包后的js文件
提供页面容器，可以理解成最外层门户，详情请见/portal/src/index.html；预定义子模块的打包js文件，引入公共模块依赖，子模块不需要自己单独打包，例如react、vue、axios等开源框架；提供HTML容器

<div id='menu'></div>
<div id='content'>
    <div id="react"></div>
    <div id="vue"></div>
</div>

开启公共依赖模块的服务，我的公共依赖模块在portal项目下common-deps-static文件夹中，只需要在这个文件夹下开启服务即可，可以通过http-server插件，端口设置为8000，并且设置跨域--cors
在portal项目下，执行命令npm run start
在project2、menu、project1项目下，分别执行命令npm run dev
chrome中打开页面：http://localhost:8233/即可

由于DEMO中，业务模块就menu、project1、project2，因此，只对这三个项目进行了webpack打包配置

很多同学说启动单个项目的时候，控制台报错，define is not defined，
这个是因为，在基于portal整合的启动模式下：npm run dev，project2(Vue)的打包成umd模式的，project1、menu是打包成amd模式，且只是一个单独的js文件，这样通过各自启动的IP端口打开页面是会报错的，浏览器解析不了这种JS模块，需要portal项目的systemjs来引入，而且npm run dev执行后，并没有生成index.html，更不可能打开页面。
因此要单独启动小模块，请运行npm run dev:local,或参考package.json中的启动命令

后续将在子模块中尝试集成各种优秀开源框架，探索single-spa到底有多大的利用价值！
能否应用到正式的大型超大型项目中？
优化微服务架构，达到开箱即用。