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

jsliang 發布于2019-08-23 17:55 / 3565人閱讀

項目地址

什么是 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

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

此架構僅作為日常工作的一個總結，具體業務場景，可以進行修改，基座模塊等可以進行自由發揮；業務模塊返回的信息也可以按照需求增加；只要各個模塊遵循一定標準，并在core中進行統一處理，均可以達到可插拔的效果。

具體可以看項目代碼，方便的話可以給個star 項目地址

云服務器 GPU云服務器基于云計算網絡架構基于rtc視頻聊天架構基于阿里云服務器架構 Puzzle

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/104369.html

基于 Netty 的可插拔業務通信協議的實現「3」業務注冊及實際工作流程

摘要：本文仍以該實例為例，探討該自定義通信協議的具體工作流程，以及如何以注冊的形式靈活插拔通信消息對象。進行二進制數據幀的解碼操作時，數據幀中已包含了消息的功能位，據此可獲取相應的編解碼器，而后可以對該數據幀進行解析，生成相應的消息對象。本文為該系列的第三篇文章，設計需求為：服務端程序和眾多客戶端程序通過 TCP 協議進行通信，通信雙方需通信的消息種類眾多。上一篇文章以一個具體的需求為例，...

LdhAndroid 2019-08-15 15:43 評論0 收藏0
Hyperledger Fabric（介紹）

摘要：比特幣和以太幣屬于一類區塊鏈，我們將其歸類為公共無許可的區塊鏈技術。例如，在單個企業中部署時，或由受信任的權威機構運作，完全拜占庭容錯的共識可能被認為是不必要的，并且對性能和吞吐量造成過度的拖累。介紹一般而言，區塊鏈是一個不可變的交易分類賬，維護在一個分布式對等節點網絡中。這些節點通過應用已經由共識協議驗證的交易來維護分類帳的副本，該交易被分組為包括將每個塊綁定到前一個塊的散列的塊...

yunhao 2019-06-27 18:34 評論0 收藏0
基于 Netty 的可插拔業務通信協議的實現「2」特定業務消息對象的設計

摘要：而實際兩者之間的通信使用的是基于的自定義二進制數據幀，對象與數據幀之間需進行轉換。該類實現了編碼解碼方法，故可對消息對象進行編碼或對數據幀進行解碼。該類的靜態方法可通過指定功能消息對象生成相應的回復對象。本文為該系列的第二篇文章，設計需求為：服務端程序和眾多客戶端程序通過 TCP 協議進行通信，通信雙方需通信的消息種類眾多。上一篇文章詳細描述了該通信協議的二進制數據幀格式以及基本 J...

Yuqi 2019-08-16 11:11 評論0 收藏0
基于 Netty 的可插拔業務通信協議的實現「1」協議描述及基本消息對象設計

摘要：基本消息對象的設計消息對象的設計主要由兩部分組成特定數據幀對應的特定消息對象。該類包含上節數據幀主幀及子幀的所有公共信息，僅僅未包含子幀中的數據體信息，該需求由基本消息對象的子類實現。開發工程中，有一個常見的需求：服務端程序和多個客戶端程序通過 TCP 協議進行通信，通信雙方需通信的消息種類眾多，并且客戶端的數量可能有數萬個。為此，雙方需要約定盡可能豐富、靈活的數據幀「數據包」協議，...

Barry_Ng 2019-08-15 14:26 評論0 收藏0