譯文:你應該知道的11個微前端框架

原文連結：https://itnext.io/11-micro-frontends-frameworks-you-should-know-b66913b9cd20

作者：Jonathan Saring

如有翻譯不準確，請多指正。

當你將長期存在的後端整體，細分為各種微服務時，就可以在後端的開發過程中獲得更加有效也更具規模的新事物。然而，大多數前端應用程式如今仍然獨立存在很難變得更加高效，與此同時，對於前端發展進程的規模化也具有同樣的意義。

微前端就是要將前端整體細分為更小、更容易進行管控的片段。每個部分都可以端到端地擁有自己的功能，可以在自身的代碼庫中工作、獨立發布版本、可以不斷地進行小的增量升級，並且還可以通過API與其他部分進行集成，以便共同對頁面和應用程式進行創作和管理。

 

有許多方法可以構建微前端，從組件的智能構建時集成，到使用自定義路由的運行時集成。在這篇文章中，我收集了許多傑出的工具，來幫助我們構建微前端。歡迎您在評論區發表建議提供或反饋！

Bit允許你從獨立的組件進行構建並管理前端，它可能是最受歡迎的，並且可以立即投入生產的解決方案。

如果你查看bit.dev 主頁，你就會發現，它是由很多獨立的組件構成，這些組件由不同的團隊，在不同的代碼庫中構建，並且最終集成在一起。

 

Bit CLI是用於組件驅動開發，並且廣泛流行的工具。通過Bit，你可以一起構建、創立併集成獨立的組件。

儘管微前端通常被認為是一個發生在運行時的組合，但是Bit也讓開發者在構建時高效地組合前端，以享受兩方面的優勢：一方面是對於「傳統整體」的安全性和健壯性，另一方面可以簡化微前端，並且使其具有可擴展性。

使用Bit，在於其他團隊合作的同時，不同的團隊可以對他們的組件進行獨立的構建、發布和公開。這樣就可以將web開發過程轉變為功能和組件的模塊化組合。

 

除了用於組件驅動開發的OSS工具外，Bit還為團隊提供了一個雲平臺，讓團隊可以構建變更並在組件上進行協作，以便可以高效地管理和擴展開發過程，與此同時保持所有團隊完全獨立以自主交付。

為了確保每個前端都有自己獨立且快速的構建流程，Bit還提供了獨特的CI / CD流程，該流程100％由組件驅動，這意味著不同的團隊可以安全地進行集成更改，不必等待、爭奪主控權或打破任何東西。開發人員可以持續並且安全的避讓所有受影響的應用程式，從而將更改傳播到組件中。

 

結果就是，工作流通過簡單的解耦代碼庫、自治團隊、體積較小卻定義良好的API，獨立發布渠道， 並且持續地進行增量更新。

如果你的團隊正在通過組件進行構建，並且正在尋找一種可以在大型應用程式上解鎖微前端和模塊化工作的解決方案，請一定要查看Bit的OSS工具和平臺，它可能正是你需要的。

Webpack 5 和 Module Federation

多個單獨的構建最後要形成一個單獨的應用程式。這些獨立的構建不應相互依賴，因此可以單獨開發和部署。

Module Federation是由Zack Jackson建立的JavaScript架構，並在後來提出為其創建Webpack插件。Webpack團隊幫助它將該插件引入了Webpack 5，目前處於測試階段。

簡而言之，Module Federation允許JavaScript應用程式在運行時從另一個應用程式動態導入代碼。該模塊將建立唯一的JavaScript條目文件，能夠通過設置webpack配置，使其他應用程式可以下載該文件。

它還通過啟用依賴關係共享，來解決代碼依賴關係和增加包大小的問題。例如，如果你要下載React組件，那麼你的應用程式就不會兩次導入React代碼。該模塊將巧妙地使用你已經擁有的React源，僅導入組件代碼。最後，如果導入的代碼由於某種原因失敗，則可以使用React.lazy和React.suspense提供備用功能，以確保用戶體驗不會因構建失敗而中斷。

這個架構釋放了構建微前端真正巨大的潛力。

Single SPA 將自己定義為：微前端的JavaScript框架。簡而言之，它將生命周期運用到了每一個應用程式。每個應用程式都可以響應url路由事件，並且必須知道如何從DOM引導，安裝和卸載自身。傳統SPA和Single SPA應用程式之間的主要區別在於它們必須能夠與其他應用程式共存，並且它們各自沒有自己的HTML頁面。

Systemjs並不是微前端的框架，但是它提供了獨立模塊跨瀏覽器管理的解決方案。這種方案正是實施MF的關鍵（實際上也被用於Single SPA）。

Systemjs被看做JS模塊的協調器，它能夠讓我們運用不同的JS模塊連接的特點，例如動態導入、導入映射等等，而不是依賴於本地的瀏覽器支持——在以上方面，Systemjs都具有接近本地的性能。

一些值得注意的功能包括適用於老版本瀏覽器的Polyfill，使用名稱的模塊導入（通過將名稱映射到路徑），和對多個JS模塊單個的網絡請求（通過使用它的API，將多個模塊設置為單個文件）。

Systemjs還可輕鬆訪問「模塊註冊表」，能夠讓你隨時了解到瀏覽器中的可用模塊。

Piral的目標是讓你輕鬆通過微前端建立一個門戶應用，它能夠確保你能夠創建一個模塊化的應用程式，並且利用微前端體系結構，在運行時使用被稱為「pilets」的解耦模塊進行擴展。「pilet」能夠獨立開發，並附帶著必要的代碼和其他相關資源。

這種前提條件非常不錯，開發人員只需要安裝使用你最喜歡的編輯器，終端，網絡瀏覽器和Node.js即可。你可以在本地開發計算機上的仿真器中，執行和調試Piral instance（應用程式外殼）和pilet（功能模塊）。

Open Components宣布他們的目標是「讓前端世界中無伺服器」。更具體地說就是，Open Components的目標是成為一個一站式微前端框架，從而使其成為一個豐富而複雜的系統，其中包括從組件處理、註冊表，到模板，甚至包括CLI工具在內的各種工具。

Open Components有兩個部分：

第一，components是同構代碼的小單元，主要由html，css，js組成。它們可以選擇包含一些邏輯，從而允許伺服器端的node.js應用程式組成一個用於呈現視圖的模型。經過渲染後，它們是純HTML片段，可以插入到任何html頁面中。

第二，consumers是網站或微型網站（小型的可獨立部署的小型網站，都通過前門服務或任何路由機制連接），它們需要將components用於在其網頁中，以此呈現部分內容。

Qiankun宣稱他們是「一個基於single-spa的微前端實現，但它已經可以投入生產了」，它的目標是解決一些，從小型子應用程式構建大型應用程式過程中，可能會面臨的一些主要問題，比如發布靜態資源，整合單個的子應用程式，確保子應用程式在開發和部署過程中彼此獨立，運行時相互隔離，從而處理公共依賴性，處理各種性能問題等。

Luigi是一個微前端JavaScript框架，可以讓你創建由本地和分布式視圖驅動的管理用戶界面。Luigi允許Web應用程式與應用程式包含的微型前端進行交流與通信。為確保通信的交流順利進行，你可以對路由，導航，授權和UX元素等進行配置。

Luigi由Luigi Core應用程式和Luigi 客戶端庫組成。他們使用postMessage API在核心應用程式和微前端之間建立安全的通信。

FrintJS是一個「用於構建可伸縮和響應式應用程式的模塊化JavaScript框架」。你可以用它加載來自不同bundlers的應用程式，為應用程式提供結構，並處理諸如路由，依賴關係以及其他問題。FrintJS還可以通過其他程序包支持RN和Vue，但主要是對React進行記錄和測試。

 

Mosaic 9是一組服務、庫，以及一個定義了它組成部分之間如何進行交互的規範，以支持大型網站的微服務樣式架構，由一些處理不同需求，比如路由、布局、模板存儲、甚至展示UI的軟體包組成。Mosaic運用的這些片段提供獨立的服務，並且根據模板定義，在運行時將他們組合在一起。

PuzzleJS是一個「用於可擴展和快速網站微前端框架」，允許你創建和一個相互對話的網關和店面項目。它的靈感來自Facebook的BigPipe，並且朝著微前端的方向發展。

 

PuzzleJS可以提供的功能包括創建一個網關，或者店面（彼此獨立），同時也可以通過提供一個組態文件把它們連接起來。它使你可以在編譯時將html模板編譯為javascript函數。由於這種操作完全與請求相獨立，因此PuzzleJ可以通過這種功能發送第一個組塊。

它也是SEO友好的，已在伺服器端進行了準備和渲染。而且，當片段所需的API出現故障時，PuzzleJs也保證其他頁面片段仍然可以正常工作。

感謝您的閱讀，也希望可以對我的文章保持持續關注，我們下期再見！