基于 Webpack4 的可插拔式微前端架构 - Puzzle

栏目: 编程语言 · 发布时间: 5年前

内容简介:Puzzle 是基于 Vue 和 Webpack4 实现的一种项目结构;业务模块可以像拼图一样与架构模块组合,形成不同的系统,而这一切都是可以在安装依赖构建第三方依赖

Puzzle 是基于 Vue 和 Webpack4 实现的一种项目结构;业务模块可以像拼图一样与架构模块组合,形成不同的系统,而这一切都是可以在 生产环境 热插拔的;这意味着你可以随时向你的系统添加新的功能模块,甚至改版整个系统,而不需要停掉它。

特点

  • 核心:支持生产环境模块热插拔

  • 支持业务模块的灵活组合

  • 基座作为基座模块,也支持多个并存(这意味着你可以很轻松的进行灰度测试)

如何做到的

  1. 将基座/业务模块以 umd 模块的方式用 webpack 打包出来
  2. 通过 LoadJS 对这些模块进行挂载,会在 window 对象上附加该模块对象
  3. 通过动态路由的方式将该对象加载到架构中

运行项目

开发环境

安装依赖

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"
复制代码

通过上述操作打包出的模块,可以直接新增到生产环境或者替换生产环境对应模块

代码结构

开发环境结构

基于 Webpack4 的可插拔式微前端架构 - Puzzle

config

此文件夹内包含webpack所有打包配置文件

public

config.js:项目配置,用于生产环境配置

index.html:HTML 模版

src -> core

架构代码

src -> frames

基座模块代码,多个基座模块并列放置

src -> puzzles

业务模块代码,多个业务模块并列放置

static

主要用于放置静态资源,将会直接复制到生产环境static文件夹

static -> dll

npm run dll 生成的第三方库和公共代码等

生产环境结构

生产环境代码按照一定结构放置,可以自由升级替换对应模块

基于 Webpack4 的可插拔式微前端架构 - Puzzle

core

npm run core 生成的架构代码

frames

npm run frame 生成的基座模块代码

puzzles

npm run puzzle 生成的业务模块代码


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

基业长青

基业长青

[美] 詹姆斯·柯林斯、[美] 杰里·波勒斯 / 真如 / 中信出版社 / 2006-9 / 39.00元

如何建立一个伟大并长盛不衰的公司?有思想的人们早已经厌倦了“年度流行语”般稍纵即逝的管理概念,他们渴求获得能经受时间考验的管理思想。 柯林斯和波勒斯在斯坦福大学为期6年的研究项目中,选取了18个卓越非凡、长盛不衰的公司作了深入的研究,这些公司包括通用电气、3M、默克、沃尔玛、惠普、迪士尼等,它们平均拥有近百年的历史。是什么使这些公司不同于它们的竞争对手呢?他们拥有什么别的公司所不具有的法宝呢......一起来看看 《基业长青》 这本书的介绍吧!

HTML 编码/解码
HTML 编码/解码

HTML 编码/解码

XML 在线格式化
XML 在线格式化

在线 XML 格式化压缩工具

正则表达式在线测试
正则表达式在线测试

正则表达式在线测试