基于 Webpack4 的可插拔式微前端架构 - Puzzle
对你有所帮助的话,可以给个star 项目地址
项目演示环境(项目在谷歌云上,最近不太稳定):PuzzleDemo 备用地址
什么是 Puzzle
Puzzle 是基于 Vue 和 Webpack4 实现的一种项目结构;业务模块可以像拼图一样与架构模块组合,形成不同的系统,而这一切都是可以在生产环境热插拔的;这意味着你可以随时向你的系统添加新的功能模块,甚至改版整个系统,而不需要全量替换整个项目。
此外当多个项目使用此架构开发,即使模块是由不同的项目打包出来的,也可以在生成环境进行快速组合,模块可以非常简单的进行复用。
特点
核心:支持生产环境模块热插拔
支持业务模块的灵活组合
基座作为基座模块,也支持多个并存(这意味着你可以很轻松的进行灰度测试)
如何做到的
- 将基座/业务模块以
umd
模块的方式用webpack
打包出来 - 通过 LoadJS 对这些模块进行挂载,会在
window
对象上附加该模块对象 - 通过动态路由的方式将该对象加载到架构中
运行项目
开发环境
安装依赖
npm install
复制代码
构建第三方依赖
npm run dll
复制代码
运行
npm start
复制代码
生产环境
安装依赖
npm install
复制代码
构建第三方依赖
npm run dll
复制代码
构建,在这步你可以选择需要打包的基座模块和业务模块方便进行灵活组合
npm run build
复制代码
热插拔相关
前端项目根据后端菜单请求进行模块加载,如本项目中后端请求返回格式为(数据来自阿里云):
[{id: "elastic",name: "弹性计算",leaf: false,children: [{id: "ecs",name: "云服务器 ECS",leaf: true,page: "/ecs",puzzle: "elastic"},// ...],icon: "aperture",puzzle: "elastic"},{id: "database",name: "数据库",leaf: false,children: [// ...],icon: "aperture",puzzle: "database"},// ...
]
复制代码
规定以第一级目录为模块目录(这里看自己的需求可以对项目进行修改)
固模块 ID 为 elastic、database 等,系统会在生产环境对所有子系统的入口文件进行请求,尝试加载模块,并生成路由;
所以通过不同用户的不同业务模块返回结果,可以进行不同模块的加载,从而进行权限控制;
同理通过不同用户的不同基座模块返回结果,可以进行不同基座的加载,从而进行灰度测试等操作(目前系统所用基座是写在public/config.js中,固此条仅作参考,项目本身可以自由发挥);
单独打包架构
npm run core
复制代码
单独打包基座模块
npm run frame --name="xxx"
复制代码
单独打包业务模块
npm run puzzle --name="xxx"
复制代码
通过上述操作打包出的模块,可以直接新增到生产环境或者替换生产环境对应模块
代码结构
开发环境结构
config
此文件夹内包含webpack所有打包配置文件
public
config.js:项目配置,用于生产环境配置
index.html:HTML 模版
src -> core
架构代码
src -> frames
基座模块代码,多个基座模块并列放置
src -> puzzles
业务模块代码,多个业务模块并列放置
static
主要用于放置静态资源,将会直接复制到生产环境static文件夹
static -> dll
由npm run dll
生成的第三方库和公共代码等
生产环境结构
生产环境代码按照一定结构放置,可以自由升级替换对应模块
core
由 npm run core
生成的架构代码
frames
由 npm run frame
生成的基座模块代码
puzzles
由 npm run puzzle
生成的业务模块代码
static
静态资源,包含打包生成的第三方库和公共代码等
PS
此架构仅作为日常工作的一个总结,具体业务场景,可以进行修改,基座模块等可以进行自由发挥;业务模块返回的信息也可以按照需求增加;只要各个模块遵循一定标准,并在core中进行统一处理,均可以达到可插拔的效果。
具体可以看项目代码,方便的话可以给个star,项目地址
转载于:https://juejin.im/post/5cf4a1466fb9a07eab686a8f
基于 Webpack4 的可插拔式微前端架构 - Puzzle相关推荐
- 【Puzzle】基于 Vue 和 Webpack4 的可插拔式微前端架构
基于 Vue 和 Webpack4 的可插拔式微前端架构 - Puzzle 演示环境:PuzzleDemo 什么是 Puzzle Puzzle 是基于 Vue 和 Webpack4 实现的一种项目结构 ...
- qiankun 微前端_看滴普大前端是如何玩转基于“qiankun”(乾坤)的微前端架构的...
前言 「微前端」可以算是 2019年前端技术领域中最热门的话题.各个大厂也纷纷贡献出了自己的解决方案和实践分享.滴普科技作为一家致力于为企业提供数字化转型服务的技术公司,前端也需要灵活聚合,快速复用, ...
- 使用开源微前端框架 Luigi 创建一个基于微前端架构的工程
官网地址 微前端通常被称为"前端微服务". 它们允许您将大型单体前端分解为独立的.可扩展的.可以协同工作的独立部分. 微前端架构对于复杂的产品或拥有众多团队的公司尤其有用,可以帮助 ...
- 爱奇艺基于 Vue 的微前端架构实践
点击上方"开发者技术前线",选择"星标" 18:50 在看 真爱 来自:爱奇艺技术产品团队 前言 近来,微前端的概念非常火爆,那么什么是微前端架构?微前端架构是 ...
- 乾坤 微前端_微前端架构初探以及我的前端技术盘点
前言 最近几年微前端一直是前端界的热门议题, 它类似于微服务架构, 主要面向于浏览器端,能将一个复杂而庞大的单体应用拆分为多个功能模块清晰且独立的子应用,且共同服于务同一个主应用.各个子应用可以独立运 ...
- 生产可用:是时候来一个微前端架构了!
微前端的场景域 在选择一个微前端方案之前,常常需要思考这样一个问题,我们为什么需要微前端.通常对微前端的诉求有两个方面,一是工程上的价值,二是产品上的价值. 对于工程上的价值,可以从一个三年陈的项目来 ...
- 微前端架构在容器平台的应用
源宝导读:随着业务的发展,天际-星舟平台未来需要解决与其他云共创共建,跨团队高效协作等诸多问题,而星舟现有的技术架构将难以支撑.本文将介绍星舟平台如何通过向更先进的"微前端"架构演 ...
- 百度关于EMP的探索:落地生产可用的微前端架构
导读:随着 Web 前端工程日趋复杂,也带来了更大的工程理治挑战,微前端在大型前端工架程构解决方案中成已为重要思路之一.本文详细描述 EMP 的诞生背景.使用场景.生态以及如何使用,可以帮 ...
- 网页上的微服务—微前端架构实践
作者:郭凌波 恒生LIGHT云社区 一.什么是微前端? "微前端"一词最早于2016年底在<ThoughtWorks Technology Radar>中提出,它将微服 ...
最新文章
- 试水区块链出版?纽约时报在招人了
- python题库刷题训练软件_刷题 -- python计算器练习题
- 【ARM】Tiny4412裸板编程之MMU(页 4K)
- CompletableFuture介绍
- Chapter 3 Phenomenon——19
- c#.net多线程编程教学(2):Thread类
- 解决layui laydate动态创建多个时不起作用点击无效的问题
- 使用Jenkins配置自动化构建
- 广告文案被指侮辱女性 茶颜悦色道歉:立即召回相关产品
- surface mesh framework运行
- altera fpga sdi输出方案_FPGA设计太复杂?四大设计要点总结助你快速上手!
- tomcat-maven-plugin问题汇总
- void muse.each(object, function)
- 安装TensorFlow-gpu
- Hadoop集群搭建及配置⑥ —— Hadoop组件安装及配置
- 人工智能兼职讲师内训讲师叶梓对sony技术部进行CV计算机视觉培训
- 英语学习框架(一) 英语音标
- 关于高速光耦6n137的使用总结_高速光耦6n137典型应用电路图汇总(多谐振荡/光电隔离器/光耦开关)...
- 递归实现指数型,排列型,组合型枚举
- linux xz文件解压