利用single-spa搭建的一个微前端架构，其中各个小

microfront-end-single-spa

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

主要技术 single-spa systemJs 项目结构 menu项目，开发框架react portal项目，组件调度、路由分发 project1项目，开发框架react project2项目，开发框架vue，由vue-cli3脚手架生成 项目介绍 menu项目 基于react框架，自定义webpack打包配置 集成antd-design 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> project1项目 基于react框架，自定义webpack打包配置 集成react-router-dom，实现路由与页面组件的绑定 project2项目 基于vue-cli3生成的VUE项目，引入了single-spa，即在vue-cli3项目基础上执行了vue add single-spa 集成了vuex、vue-router、axios、element-ui 基于portal整合的完整运行步骤 开启公共依赖模块的服务，我的公共依赖模块在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打包配置

启动本地开发模式（适用于：menu、project1、project2）,都是相同的命令：npm run dev:local 提示（TIP） 很多同学说启动单个项目的时候，控制台报错，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到底有多大的利用价值！
能否应用到正式的大型超大型项目中？
优化微服务架构，达到开箱即用。