點(diǎn)擊上方“逆鋒起筆”，公眾號(hào)回復(fù) pdf

領(lǐng)取大佬們推薦的學(xué)習(xí)資料

作者 | Jonathan Saring

譯者 | Flora

策劃 | 蔡芳芳

將單體后端分解成為微服務(wù)之后，后端開發(fā)流程已在效率和規(guī)模上取得了顯著進(jìn)步。然而，當(dāng)今大多數(shù)前端應(yīng)用程序架構(gòu)仍然是單體式的，使得前端開發(fā)流程很難加速和擴(kuò)展。

微前端的想法是將前端單體分解為許多更小、更易管理的片段。每個(gè)團(tuán)隊(duì)可以端到端地?fù)碛凶约旱墓δ?，可以在自己的代碼庫(kù)中工作，可以獨(dú)立發(fā)布版本，可以不斷進(jìn)行小的增量升級(jí)，還可以通過 API 與其他團(tuán)隊(duì)集成，以便他們可以一起組建和管理頁(yè)面及應(yīng)用程序。

微前端有很多方法，從智能的構(gòu)建時(shí)組件集成，到使用自定義路由的運(yùn)行時(shí)集成等等。在本文的列表中，作者收集了最杰出的微前端構(gòu)建工具。歡迎讀者在評(píng)論中添加反饋或建議！

Bit 容許你從獨(dú)立的組件組建和管理前端。它可能是清單上最受歡迎的、可用于生產(chǎn)（production-ready）的解決方案。

如果查看 bit.dev 主頁(yè)，你會(huì)發(fā)現(xiàn)它由很多獨(dú)立的組件構(gòu)成。這些組件由不同團(tuán)隊(duì)，在不同代碼庫(kù)中構(gòu)建，并最終集成在一起，創(chuàng)造了一個(gè)緊密結(jié)合的產(chǎn)品。

Bit CLI 是廣泛流行的工具，用于組件驅(qū)動(dòng)開發(fā)。使用 Bit，你可以將獨(dú)立的組件構(gòu)建、集成和組合到一起。

盡管人們通常將微前端視為在運(yùn)行時(shí)發(fā)生的組合，但 Bit 可以讓開發(fā)人員在構(gòu)建時(shí)高效地組合前端，以享受兩全其美的優(yōu)勢(shì)：“傳統(tǒng)單體式前端”的安全性和健壯性，以及微前端的 簡(jiǎn)單性 和 可伸縮性。

使用 Bit，在與其他團(tuán)隊(duì)合作同時(shí)，不同的團(tuán)隊(duì)可以獨(dú)立構(gòu)建、發(fā)布和公開其組件，這樣就可以將 Web 開發(fā)過程轉(zhuǎn)變?yōu)楣δ芎徒M件的模塊化組合。

除了 用于組件驅(qū)動(dòng)開發(fā)的 OSS 工具 外，Bit 還為團(tuán)隊(duì)提供了一個(gè) 云平臺(tái)，該云平臺(tái)使得團(tuán)隊(duì)可以構(gòu)建變更并在組件上進(jìn)行協(xié)作，可以高效地管理和擴(kuò)展開發(fā)過程，同時(shí)保持所有團(tuán)隊(duì)完全獨(dú)立，團(tuán)隊(duì)可自主交付。

為了確保每個(gè)前端都有自己獨(dú)立且快速的構(gòu)建流程，Bit 還提供了獨(dú)特的 CI/CD 流程，該流程為 100% 組件驅(qū)動(dòng)，這意味著不同的團(tuán)隊(duì)可以安全地集成更改，而不必等待，爭(zhēng)奪主控權(quán)或打破任何東西。開發(fā)人員可以在所有受影響的應(yīng)用程序中持續(xù)和安全地將更改傳播到組件。

作為結(jié)果，通過 簡(jiǎn)單的解耦代碼庫(kù)、自治團(tuán)隊(duì)、小型定義良好的 API、獨(dú)立的發(fā)布管道 和 持續(xù)增量升級(jí)，增強(qiáng)了工作流程。可以查看如下示例。

《我們?cè)鯓訕?gòu)建微前端》

https://blog.bitsrc.io/how-we-build-micro-front-ends-d3eeeac0acfc

如果你的團(tuán)隊(duì)使用組件來開發(fā)軟件，并且正在尋找一種可以在大型應(yīng)用程序上解鎖微前端和模塊化工作的解決方案，請(qǐng)務(wù)必查看 Bit 的 OSS 工具和平臺(tái)，這可能正是你所需要的。

多個(gè)單獨(dú)的構(gòu)建最后要形成一個(gè)應(yīng)用程序。這些單獨(dú)的構(gòu)建不應(yīng)相互依賴，因此可以單獨(dú)開發(fā)和部署。

Module Federation 是 Zack Jackson 發(fā)明的 JavaScript 架構(gòu)，Zack Jackson 隨后提出為其創(chuàng)建一個(gè) Webpack 插件。Webpack 團(tuán)隊(duì)提供幫助將該插件引入了 Webpack 5，目前處于 beta 測(cè)試階段。

簡(jiǎn)而言之，Module Federation 允許 JavaScript 應(yīng)用程序在運(yùn)行時(shí)從另一個(gè)應(yīng)用程序動(dòng)態(tài)導(dǎo)入代碼。模塊將構(gòu)建唯一的 JavaScript 入口文件，其他應(yīng)用程序可以通過設(shè)置 Webpack 配置項(xiàng)來下載該入口文件。

它還通過啟用依賴關(guān)系共享來解決代碼依賴關(guān)系和包大小增加的問題。例如，如果你要下載一個(gè) React 組件，那么你的應(yīng)用程序不會(huì)兩次導(dǎo)入 React 代碼。模塊將自動(dòng)使用你已有的 React 源，僅額外導(dǎo)入組件代碼。最后，你可以使用 React.lazy 和 React.suspense 提供后備功能，以確保當(dāng)導(dǎo)入的代碼由于某種原因失敗后，不會(huì)因構(gòu)建失敗而影響用戶體驗(yàn)。

這個(gè)架構(gòu)釋放了構(gòu)建微前端的巨大潛力。你可以在如下文章中閱讀更多信息和查看示例。

采用 Webpack 5、Module Federation 和 Bit 變革微前端：

https://blog.bitsrc.io/revolutionizing-micro-frontends-with-webpack-5-module-federation-and-bit-99ff81ceb0

Single SPA 將自己定義為一種“前端微服務(wù) Javascript 框架”。簡(jiǎn)言之，它將生命周期應(yīng)用于每個(gè)應(yīng)用程序。每個(gè)應(yīng)用程序都可以響應(yīng) url 路由事件，并且知道如何從 DOM 引導(dǎo)，加載和卸載自身。傳統(tǒng) SPA 和 Single SPA 應(yīng)用程序之間的主要區(qū)別在于它們能夠與其他應(yīng)用程序共存，并且它們各自沒有自己的 HTML 頁(yè)面。

因此，如果你希望將不同的前端或框架整合到一個(gè) DOM 中，并希望在運(yùn)行時(shí)進(jìn)行集成，請(qǐng)查看這個(gè)有趣的實(shí)驗(yàn)。

你可以在這里查看一些示例：

SystemJS 不是微前端框架，但它確實(shí)為跨瀏覽器的獨(dú)立模塊管理提供了解決方案。這種解決方案是實(shí)現(xiàn) MF 的關(guān)鍵（并且實(shí)際上也被 Singe-spa 使用）。

可以將 SystemJS 視為 JS 模塊的協(xié)調(diào)器。它使我們無需依賴本機(jī)瀏覽器支持，即可使用與 JS 模塊相關(guān)的不同功能，諸如動(dòng)態(tài)導(dǎo)入和導(dǎo)入映射等，并且所有這些都具有接近本機(jī)的性能。一些值得注意的功能包括用于較舊瀏覽器的 Polyfill，使用名稱的模塊導(dǎo)入（通過將名稱映射到路徑）以及對(duì)多個(gè) JS 模塊的單個(gè)網(wǎng)絡(luò)請(qǐng)求（通過使用其 API 將多個(gè)模塊設(shè)置為單個(gè)文件）。

它還提供便捷的方式訪問其“模塊注冊(cè)表”，以便你隨時(shí)了解瀏覽器中哪些模塊是可用的。

Piral 的目標(biāo)是讓你可以使用微前端輕松構(gòu)建門戶應(yīng)用程序。你可以使用 Piral 創(chuàng)建模塊化前端應(yīng)用程序，并利用微前端體系結(jié)構(gòu)在運(yùn)行時(shí)使用稱為 pilets 的解耦模塊進(jìn)行擴(kuò)展。用戶可以獨(dú)立開發(fā)一個(gè) pilet，并附帶必要的代碼以及所有其他相關(guān)資產(chǎn)。這是一個(gè)現(xiàn)場(chǎng)演示：

Piral 所要求的前提條件相當(dāng)寬松，開發(fā)人員僅需要安裝喜歡的編輯器、終端、網(wǎng)絡(luò)瀏覽器和 Node.js 即可。開發(fā)者可以在本地開發(fā)機(jī)的仿真器中執(zhí)行和調(diào)試 Piral instance（應(yīng)用程序外殼）和 piltes（功能模塊）。

Open Component（簡(jiǎn)稱 OC）項(xiàng)目宣布其目標(biāo)是“前端世界中的無服務(wù)器”。更具體地說，OC 旨在成為一個(gè)一站式微前端框架，從而使其成為一個(gè)豐富而復(fù)雜的系統(tǒng)，其中包括從組件處理到注冊(cè)表、再到模板、甚至包括 CLI 工具。OpenComponents 有兩個(gè)部分：

• components 是同構(gòu)代碼的小單元，主要由 html、javascript、css 組成。它們可以選擇包含一些邏輯，從而允許服務(wù)端的 node.js 應(yīng)用去組建用于呈現(xiàn)視圖的模型。在渲染之后，它們就是純 html 片段，可以插入到任何 html 頁(yè)面中。

• consumers 是網(wǎng)站或微型網(wǎng)站（所有小型可獨(dú)立部署的網(wǎng)站，這些網(wǎng)站均通過前門服務(wù)或路由機(jī)制連接）。這些網(wǎng)站需要在其網(wǎng)頁(yè)中呈現(xiàn)部分內(nèi)容的組件。請(qǐng)查看這里以了解更多信息：

• https://github.com/opencomponents/oc
  

Qiankun 聲稱自己是“一個(gè) 微前端 實(shí)現(xiàn)，基于 single-spa，但已使 single-spa 可用于生產(chǎn)（production-ready）”。該項(xiàng)目旨在解決由較小的子應(yīng)用程序組成較大的應(yīng)用程序時(shí)所面臨的一些主要問題，例如發(fā)布靜態(tài)資源、集成單個(gè)子應(yīng)用程序、確保子應(yīng)用程序在開發(fā)和部署過程中彼此獨(dú)立且運(yùn)行時(shí)相互隔離、處理公共依賴性和處理性能問題等。

Luigi 是一個(gè)微前端 JavaScript 框架，你可以使用它創(chuàng)建由本地和分布式視圖驅(qū)動(dòng)的管理用戶界面。Luigi 允許 Web 應(yīng)用程序與應(yīng)用程序包含的微前端進(jìn)行通信。為了確保通信順利進(jìn)行，你可以配置路由、導(dǎo)航、授權(quán)和 UX 元素等設(shè)置。

Luigi 由 Luigi Core 應(yīng)用程序和 Luigi 客戶端庫(kù)組成。他們使用 postMessage API 在核心應(yīng)用程序和微前端之間建立安全的通信。想獲取更多信息，請(qǐng)自行前往查看。

這是一個(gè) 測(cè)試樂園 (Test Playground)，你可以在這里親身體驗(yàn)它的工作原理。

嘗試一下，也可在 GitHub 上查看這個(gè)不錯(cuò)的 SAP 項(xiàng)目：

FrintJS 是“用于構(gòu)建可伸縮和響應(yīng)式應(yīng)用程序的模塊化 JavaScript 框架”。你可以使用它加載來自不同 bundlers 的應(yīng)用程序，為應(yīng)用程序提供結(jié)構(gòu)，并處理諸如路由、依賴關(guān)系等問題。該項(xiàng)目可通過附加的軟件包支持 RN 和 Vue，但文檔和測(cè)試大多數(shù)是針對(duì) React 的。

可以訪問如下的 GitHub 項(xiàng)目了解更多信息。

Mosaic 是一組服務(wù)，庫(kù)以及規(guī)范定義了其組件之間如何彼此交互，用來支持大型網(wǎng)站的微服務(wù)式架構(gòu)。Mosaic 使用了片段（Fragments）的機(jī)制，這些片段由單獨(dú)的服務(wù)程序提供服務(wù)，并根據(jù)模板定義在運(yùn)行時(shí)組合在一起。關(guān)注公眾號(hào) 逆鋒起筆，回復(fù) pdf，下載你需要的各種學(xué)習(xí)資料。

它由一堆軟件包組成，這些軟件包處理不同的問題，例如路由、布局、模板存儲(chǔ)、甚至展示 UI。需要更多信息，請(qǐng)查看如下鏈接。

PuzzleJS 是“用于可擴(kuò)展和快速建站的微前端框架”。你可以使用它創(chuàng)建相互對(duì)話的網(wǎng)關(guān)和店面項(xiàng)目。它的靈感來自 Facebook 的 BigPipe，朝著微前端的方向發(fā)展。

PuzzleJs 提供諸如創(chuàng)建網(wǎng)關(guān)或店面（彼此獨(dú)立）的功能，并提供配置文件將它們連接。你可以使用它在編譯時(shí)將 html 模板編譯為 javascript 函數(shù)。此操作完全獨(dú)立于請(qǐng)求，因此 PuzzleJ 可以使用此功能發(fā)送第一個(gè)塊。它也是 SEO 友好的，在服務(wù)端進(jìn)行準(zhǔn)備和渲染。而且，當(dāng)片段所需的 api 出現(xiàn)故障時(shí)，PuzzleJs 可保證其他頁(yè)面片段仍正常工作。這里是一個(gè)真實(shí)的 例子。

https://itnext.io/11-micro-frontends-frameworks-you-should-know-b66913b9cd20