基於 Webpack4 的可插拔式微前端架構 - Puzzle

項目地址

什麼是 Puzzle

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"

經過上述操做打包出的模塊，能夠直接新增到生產環境或者替換生產環境對應應模塊

代碼結構

開發環境結構

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 項目地址