利用single-spa搭建的一个微前端架构,其中各个小型应用具有独立部署、独立运行、允许存在独立仓储的特性。由portal项目实现各个应用的组合
利用single-spa搭建的一个微前端架构,其中各个小型应用具有独立部署、独立运行、允许存在独立仓储的特性。由portal项目实现各个应用的组合
react
组件调度、路由分发
react
vue
,由vue-cli3脚手架生成
react
框架,自定义webpack打包配置antd-design
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>
react
框架,自定义webpack打包配置react-router-dom
,实现路由与页面组件的绑定vue-cli3
生成的VUE项目,引入了single-spa
,即在vue-cli3
项目基础上执行了vue add single-spa
vuex、vue-router、axios、element-ui
公共依赖模块的服务
,我的公共依赖模块在portal项目下common-deps-static文件夹中,只需要在这个文件夹下开启服务即可,可以通过http-server插件,端口设置为8000
,并且设置跨域--cors
portal
项目下,执行命令npm run start
project2、menu、project1
项目下,分别执行命令npm run dev
http://localhost:8233/
即可由于DEMO中,业务模块就menu、project1、project2
,因此,只对这三个项目进行了webpack打包配置
menu、project1、project2
),都是相同的命令:npm run dev:local
define is not defined
,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到底有多大的利用价值!
能否应用到正式的大型超大型项目中?
优化微服务架构,达到开箱即用。