【Github】项目名：Puzzle：基于Vue和Webpack5的可热插拔式微前端架构
项目简介
Puzzle是一个基于Vue和Webpack5的项目结构。业务模块能像拼图一样与结构模块组合成不同系统，在生产环境可热插拔，这意味着可随时给系统添加新功能模块，甚至修改整个系统而无需替换整个项目。多个用此结构开发的项目，模块即便由不同项目打包也能在生产环境快速组合，模块可简单复用。
项目特色（核心技术相关）
- 核心：支持生产环境模块热交换。
- 支持业务模块灵活组合。
- 系统框架作为框架模块也支持多种共存（可轻松进行灰度测试）。
项目操作
- 用webpack将框架/业务模块打包成umd模块。
- 通过LoadJS挂载模块会将模块对象添加到window对象，再通过动态路由将对象加载到方案中。
项目运行
开发环境
- 安装依赖：npm install。
- 构建第三方依赖：npm rundll。
- 运行：npm start。
生产环境
- 安装依赖：npm install。
- 构建第三方依赖：npm rundll。
- 构建（可选择需打包的框架和业务模块灵活组合）：npm run build。
热交换相关
前端项目根据后端菜单请求加载模块，后端请求返回格式示例（以阿里云数据为例）包含模块相关信息，系统会请求生产环境中所有子系统（模块）的入口文件，尝试加载模块并生成路由，通过返回不同用户服务模块结果加载不同模块实现权限控制，通过不同用户的不同框架返回结果加载不同框架进行灰度测试等操作。可单独打包方案、框架模块、业务模块并添加或替换生产环境中相应模块。
项目总结
Puzzle项目基于Vue和Webpack5构建了一种可热插拔的微前端架构，有着诸多实用的功能和便捷的操作方式。希望大家对这个项目积极留言讨论，分享自己的见解或者使用经验等。