基于 Webpack4 的可插拔式微前端架構(gòu) - Puzzle

jsliang 發(fā)布于2019-08-23 17:55 / 3575人閱讀

項(xiàng)目地址

什么是 Puzzle

Puzzle 是基于 Vue 和 Webpack4 實(shí)現(xiàn)的一種項(xiàng)目結(jié)構(gòu)；業(yè)務(wù)模塊可以像拼圖一樣與架構(gòu)模塊組合，形成不同的系統(tǒng)，而這一切都是可以在生產(chǎn)環(huán)境熱插拔的；這意味著你可以隨時向你的系統(tǒng)添加新的功能模塊，甚至改版整個系統(tǒng)，而不需要全量替換整個項(xiàng)目。

此外當(dāng)多個項(xiàng)目使用此架構(gòu)開發(fā)，即使模塊是由不同的項(xiàng)目打包出來的，也可以在生成環(huán)境進(jìn)行快速組合，模塊可以非常簡單的進(jìn)行復(fù)用。

特點(diǎn)

核心：支持生產(chǎn)環(huán)境模塊熱插拔

支持業(yè)務(wù)模塊的靈活組合

基座作為基座模塊，也支持多個并存（這意味著你可以很輕松的進(jìn)行灰度測試）

如何做到的

將基座/業(yè)務(wù)模塊以umd模塊的方式用 webpack 打包出來

通過 LoadJS 對這些模塊進(jìn)行掛載，會在 window 對象上附加該模塊對象

通過動態(tài)路由的方式將該對象加載到架構(gòu)中

運(yùn)行項(xiàng)目 開發(fā)環(huán)境

安裝依賴

npm install

構(gòu)建第三方依賴

npm run dll

運(yùn)行

npm start

生產(chǎn)環(huán)境

安裝依賴

npm install

構(gòu)建第三方依賴

npm run dll

構(gòu)建，在這步你可以選擇需要打包的基座模塊和業(yè)務(wù)模塊方便進(jìn)行靈活組合

npm run build

熱插拔相關(guān)

前端項(xiàng)目根據(jù)后端菜單請求進(jìn)行模塊加載，如本項(xiàng)目中后端請求返回格式為（數(shù)據(jù)來自阿里云）：

[
  {
    id: "elastic",
    name: "彈性計(jì)算",
    leaf: false,
    children: [
      {
        id: "ecs",
        name: "云服務(wù)器 ECS",
        leaf: true,
        page: "/ecs",
        puzzle: "elastic"
      },
      // ...
    ],
    icon: "aperture",
    puzzle: "elastic"
  },
  {
    id: "database",
    name: "數(shù)據(jù)庫",
    leaf: false,
    children: [
        // ...
    ],
    icon: "aperture",
    puzzle: "database"
  },
  // ...
]

規(guī)定以第一級目錄為模塊目錄（這里看自己的需求可以對項(xiàng)目進(jìn)行修改）

固模塊 ID 為 elastic、database 等，系統(tǒng)會在生產(chǎn)環(huán)境對所有子系統(tǒng)的入口文件進(jìn)行請求，嘗試加載模塊，并生成路由；

所以通過不同用戶的不同業(yè)務(wù)模塊返回結(jié)果，可以進(jìn)行不同模塊的加載，從而進(jìn)行權(quán)限控制；

同理通過不同用戶的不同基座模塊返回結(jié)果，可以進(jìn)行不同基座的加載，從而進(jìn)行灰度測試等操作（目前系統(tǒng)所用基座是寫在public/config.js中，固此條僅作參考，項(xiàng)目本身可以自由發(fā)揮）；

多帶帶打包架構(gòu)

npm run core

多帶帶打包基座模塊

npm run frame --name="xxx"

多帶帶打包業(yè)務(wù)模塊

npm run puzzle --name="xxx"

通過上述操作打包出的模塊，可以直接新增到生產(chǎn)環(huán)境或者替換生產(chǎn)環(huán)境對應(yīng)應(yīng)模塊

代碼結(jié)構(gòu) 開發(fā)環(huán)境結(jié)構(gòu)

config

此文件夾內(nèi)包含webpack所有打包配置文件

public

config.js：項(xiàng)目配置，用于生產(chǎn)環(huán)境配置

index.html：HTML 模版

src -> core

架構(gòu)代碼

src -> frames

基座模塊代碼，多個基座模塊并列放置

src -> puzzles

業(yè)務(wù)模塊代碼，多個業(yè)務(wù)模塊并列放置

static

主要用于放置靜態(tài)資源，將會直接復(fù)制到生產(chǎn)環(huán)境static文件夾

static -> dll

由npm run dll生成的第三方庫和公共代碼等

生產(chǎn)環(huán)境結(jié)構(gòu)

生產(chǎn)環(huán)境代碼按照一定結(jié)構(gòu)放置，可以自由升級替換對應(yīng)模塊

core

由 npm run core 生成的架構(gòu)代碼

frames

由 npm run frame 生成的基座模塊代碼

puzzles

由 npm run puzzle 生成的業(yè)務(wù)模塊代碼

static

靜態(tài)資源，包含打包生成的第三方庫和公共代碼等

此架構(gòu)僅作為日常工作的一個總結(jié)，具體業(yè)務(wù)場景，可以進(jìn)行修改，基座模塊等可以進(jìn)行自由發(fā)揮；業(yè)務(wù)模塊返回的信息也可以按照需求增加；只要各個模塊遵循一定標(biāo)準(zhǔn)，并在core中進(jìn)行統(tǒng)一處理，均可以達(dá)到可插拔的效果。

具體可以看項(xiàng)目代碼，方便的話可以給個star 項(xiàng)目地址