成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專(zhuān)欄INFORMATION COLUMN

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

jsliang / 3671人閱讀

項(xiàng)目地址

什么是 Puzzle

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

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

特點(diǎn)

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

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

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

如何做到的

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

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

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

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

安裝依賴(lài)

npm install

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

npm run dll

運(yùn)行

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

安裝依賴(lài)

npm install

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

npm run dll

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

npm run build
熱插拔相關(guān)

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

[
  {
    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ù)庫(kù)",
    leaf: false,
    children: [
        // ...
    ],
    icon: "aperture",
    puzzle: "database"
  },
  // ...
]

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

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

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

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

多帶帶打包架構(gòu) 
npm run core
多帶帶打包基座模塊 
npm run frame --name="xxx"
多帶帶打包業(yè)務(wù)模塊 
npm run puzzle --name="xxx"

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

代碼結(jié)構(gòu) 開(kāi)發(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

基座模塊代碼，多個(gè)基座模塊并列放置

src -> puzzles

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

static

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

static -> dll

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

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

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

core

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

frames

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

puzzles

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

static

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

PS

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

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

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/104369.html

相關(guān)文章

  • 基于 Netty 的可插拔業(yè)務(wù)通信協(xié)議的實(shí)現(xiàn)「3」業(yè)務(wù)注冊(cè)及實(shí)際工作流程

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

    LdhAndroid 評(píng)論0 收藏0

  • Hyperledger Fabric（介紹）

    摘要：比特幣和以太幣屬于一類(lèi)區(qū)塊鏈，我們將其歸類(lèi)為公共無(wú)許可的區(qū)塊鏈技術(shù)。例如，在單個(gè)企業(yè)中部署時(shí)，或由受信任的權(quán)威機(jī)構(gòu)運(yùn)作，完全拜占庭容錯(cuò)的共識(shí)可能被認(rèn)為是不必要的，并且對(duì)性能和吞吐量造成過(guò)度的拖累。 介紹 一般而言，區(qū)塊鏈?zhǔn)且粋€(gè)不可變的交易分類(lèi)賬，維護(hù)在一個(gè)分布式對(duì)等節(jié)點(diǎn)網(wǎng)絡(luò)中。這些節(jié)點(diǎn)通過(guò)應(yīng)用已經(jīng)由共識(shí)協(xié)議驗(yàn)證的交易來(lái)維護(hù)分類(lèi)帳的副本，該交易被分組為包括將每個(gè)塊綁定到前一個(gè)塊的散列的塊...

    yunhao 評(píng)論0 收藏0

  • 基于 Netty 的可插拔業(yè)務(wù)通信協(xié)議的實(shí)現(xiàn)「2」特定業(yè)務(wù)消息對(duì)象的設(shè)計(jì)

    摘要：而實(shí)際兩者之間的通信使用的是基于的自定義二進(jìn)制數(shù)據(jù)幀，對(duì)象與數(shù)據(jù)幀之間需進(jìn)行轉(zhuǎn)換。該類(lèi)實(shí)現(xiàn)了編碼解碼方法，故可對(duì)消息對(duì)象進(jìn)行編碼或?qū)?shù)據(jù)幀進(jìn)行解碼。該類(lèi)的靜態(tài)方法可通過(guò)指定功能消息對(duì)象生成相應(yīng)的回復(fù)對(duì)象。 本文為該系列的第二篇文章，設(shè)計(jì)需求為：服務(wù)端程序和眾多客戶端程序通過(guò) TCP 協(xié)議進(jìn)行通信，通信雙方需通信的消息種類(lèi)眾多。上一篇文章詳細(xì)描述了該通信協(xié)議的二進(jìn)制數(shù)據(jù)幀格式以及基本 J...

    Yuqi 評(píng)論0 收藏0

  • 基于 Netty 的可插拔業(yè)務(wù)通信協(xié)議的實(shí)現(xiàn)「1」協(xié)議描述及基本消息對(duì)象設(shè)計(jì)

    摘要：基本消息對(duì)象的設(shè)計(jì)消息對(duì)象的設(shè)計(jì)主要由兩部分組成特定數(shù)據(jù)幀對(duì)應(yīng)的特定消息對(duì)象。該類(lèi)包含上節(jié)數(shù)據(jù)幀主幀及子幀的所有公共信息，僅僅未包含子幀中的數(shù)據(jù)體信息，該需求由基本消息對(duì)象的子類(lèi)實(shí)現(xiàn)。 開(kāi)發(fā)工程中，有一個(gè)常見(jiàn)的需求：服務(wù)端程序和多個(gè)客戶端程序通過(guò) TCP 協(xié)議進(jìn)行通信，通信雙方需通信的消息種類(lèi)眾多，并且客戶端的數(shù)量可能有數(shù)萬(wàn)個(gè)。為此，雙方需要約定盡可能豐富、靈活的數(shù)據(jù)幀「數(shù)據(jù)包」協(xié)議，...

    Barry_Ng 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<