發(fā)現(xiàn)最好的工具，以幫助您構(gòu)建偉大的微觀前端。
將長期的后端整料分解為微服務(wù)允許新發(fā)現(xiàn)效率和尺度在后端開發(fā)過程中。然而，今天的大多數(shù)前端應(yīng)用架構(gòu)仍然是單片，使得難以加速和縮放前端開發(fā)過程是同樣的意義。
微前端的想法是將前端整向單片分解成更小，更可管理的碎片。每個團隊都可以在端到端擁有自己的功能，在自己的代碼庫中工作，獨立發(fā)布版本，不斷提供小的增量升級，也可以通過API與其他團隊集成，以便它們可以撰寫和管理頁面和應(yīng)用程序。
微型前端有許多方法，從組件的智能構(gòu)建時間集成到使用自定義路由器的運行時集成。在此列表中，我收集了最突出的工具，以幫助構(gòu)建微型前端。請隨時添加評論中的反饋或建議!
1. Bit
位允許您從獨立組件編寫和管理前端。這可能是列表中最受歡迎和最受歡迎的制作的解決方案。
如果您看看bit.dev主頁，您將注意到它由不同團隊構(gòu)建的獨立組件，在不同的代碼庫中，并且全部集成在一起以創(chuàng)建一個凝聚力的產(chǎn)品。
> Example — Micro frontends with Bit components
Bit CLI是一個廣泛流行的組件驅(qū)動開發(fā)工具。有了位，您可以在一起構(gòu)建，集成和撰寫?yīng)毩⒔M件。
雖然微型前端通常被認為是在運行時發(fā)生的組合物，但是有點讓開發(fā)人員有效地構(gòu)成構(gòu)建 時的前端，以享受兩個世界的最佳選擇：“傳統(tǒng)整體”的安全性和穩(wěn)健性以及微前端的簡單性和可擴展性。
使用Bit，不同的團隊可以獨立構(gòu)建，發(fā)布和公開組件，同時與其他團隊合作將Web開發(fā)過程轉(zhuǎn)換為功能和組件的模塊化組成。
除了OSS工具的組件驅(qū)動的開發(fā)工具外，位為團隊提供了一個云平臺，以構(gòu)建更改，并在組件上共同合作，以便可以有效地管理和縮放，同時保留所有團隊完全獨立的團隊自主交付。
為了確保每個前端獲得自己的獨立和快速構(gòu)建過程，還提供了一個唯一的CI / CD進程，即100%組件驅(qū)動，這意味著不同的團隊可以安全地集成更改而無需等待，爭取控制，或者打破任何東西。開發(fā)人員可以在所有受影響的應(yīng)用程序中持續(xù)和安全地傳播對組件的更改。
> Component-driven CI: X50 Faster
因此，使用簡單的解耦的碼條，自主團隊，小型定義API，獨立釋放管道和持續(xù)增量升級，增強了工作流程。
如果您的團隊正在使用組件構(gòu)建并且正在尋找解鎖微型前端和模塊化工作的解決方案，請務(wù)必查看可能是您需要的Bit的OSS工具和平臺。
2. WebPack 5和模塊聯(lián)合
多個單獨的構(gòu)建應(yīng)形成單個應(yīng)用程序。這些單獨的構(gòu)建不應(yīng)彼此之間有依賴關(guān)系，因此可以單獨開發(fā)和部署它們。La Micro Frontends。
模塊聯(lián)合是由Zack Jackson發(fā)明的JavaScript架構(gòu)，然后提出為它創(chuàng)建一個WebPack插件。WebPack團隊有助于將插件帶入WebPack 5，目前在Beta中。
簡而言之，模塊聯(lián)合允許JavaScript應(yīng)用程序在運行時從另一個應(yīng)用程序動態(tài)導入代碼。該模塊將構(gòu)建一個唯一的JavaScript條目文件，可以通過設(shè)置WebPack配置來由其他應(yīng)用程序下載。
它還通過啟用依賴性共享來解決代碼依賴關(guān)系和增加捆綁大小的問題。例如，如果您正在下載React組件，您的應(yīng)用程序?qū)⒉粫雰纱蜶eact代碼。該模塊將巧妙地使用您已經(jīng)擁有的React源，并僅導入組件代碼。最后，您可以使用React.Lazy和React.Suspense如果導入的代碼出于某種原因，請?zhí)峁┩嘶兀绻鲇谀撤N原因，請確保用戶體驗不會因版本而無法中斷。
這解鎖了構(gòu)建微型前端的一些非常有利的潛力。
3.單頁面應(yīng)用 SPA
單個SPA將其自身定義為“前端微服務(wù)的JavaScript框架”。簡而言之，它適用于每個應(yīng)用程序的生命周期。每個應(yīng)用程序都可以響應(yīng)URL路由事件，并且必須知道如何從DOM引導，掛載和卸載自己。傳統(tǒng)的SPA和單級SPA應(yīng)用程序之間的主要區(qū)別在于它們必須能夠與其他應(yīng)用程序共存，并且它們并不是每個都有自己的HTML頁面。
因此，如果您希望將不同的前端或框架放入一個DOM并旨在在運行時集成，請查看此有趣的實驗。
4. SystemJS
SystemJS不是微型框架，但它確實為獨立模塊的跨瀏覽器管理提供了解決方案，這是實現(xiàn)MFS的關(guān)鍵(并且實際上由單個SPA使用)。
系統(tǒng)js可以被認為是JS模塊的指揮。它允許我們使用不同的JS模塊相關(guān)的功能，例如動態(tài)導入，導入地圖等，而無需依賴本機瀏覽器支持 - 以及所有接近本地性能。一些明顯的功能包括舊瀏覽器的Polyfill，模塊使用名稱(通過映射到路徑)的名稱，以及用于多個JS模塊的單個網(wǎng)絡(luò)請求(通過使用其API將多個模塊設(shè)置為單個文件)。
它還可以輕松訪問其“模塊注冊表”，讓您知道瀏覽器中有哪些模塊在任何時候都可以使用。看一看。
5. Piral.
Piral的目標是讓您輕松使用微前端構(gòu)建門戶網(wǎng)站應(yīng)用程序。Piral使您可以創(chuàng)建一個模塊化前端應(yīng)用程序，該應(yīng)用程序在運行時擴展，其中包含叫滅脫帽的解耦模塊，利用了微型前端架構(gòu)。Pilet可以獨立開發(fā)，并以必要的代碼以及所有其他相關(guān)資產(chǎn)。
前提條件相當不錯，作為開發(fā)人員，您只需要您最喜歡的編輯器，終端，互聯(lián)網(wǎng)瀏覽器和Node.js。Piral實例(應(yīng)用程序shell)和Pilets(應(yīng)用程序shell)可以在本地開發(fā)機上的仿真器中執(zhí)行和調(diào)試。
6.Open Components
Open Components項目將其目標宣布為“在前端世界中的無服務(wù)架構(gòu)”。更具體地說，OC旨在成為微前端的框架，它提供了一個地方所需的一切，使其成為一個豐富和復雜的系統(tǒng)，包括從組件處理到注冊表到模板甚至CLI工具的工具。OpenComponents有兩部分：
組件是小單位代理代碼，主要由HTML，JavaScript，CSS組成。它們可以選擇包含一些邏輯，允許服務(wù)器端節(jié)點.js應(yīng)用程序撰寫用于呈現(xiàn)視圖的模型。渲染后，它們是要注入任何HTML頁面的純HTML。
消費者是網(wǎng)站或微基金(所有由前門服務(wù)或任何路由機制連接的小型可部署網(wǎng)站)，需要組件以在其網(wǎng)頁中呈現(xiàn)部分內(nèi)容。
7.Qiankun
Qiankun表示它是“基于SPA的微型前端的實施，而是制造它準備就緒”。該項目旨在解決圍繞較小的子應(yīng)用程序組成較大應(yīng)用程序的主要問題，例如發(fā)布靜態(tài)資源，集成各個子應(yīng)用程序，確保子應(yīng)用程序在開發(fā)和部署期間彼此獨立，并且是運行時隔離，處理公共依賴項，處理性能問題等。
在中國傳統(tǒng)文化中，乾來意味著天堂和坤代表地球，所以Qiankun是宇宙。一個…
8. Luigi
Luigi是一個微前端JavaScript框架，使您可以創(chuàng)建由本地和分布式視圖驅(qū)動的管理用戶界面。Luigi允許Web應(yīng)用程序與應(yīng)用程序包含的微前端通信。要確保通信順利運行，您可以配置路由，導航，授權(quán)和UX元素等設(shè)置。
Luigi由Luigi核心應(yīng)用程序和Luigi客戶端庫組成。它們使用PostMessage API建立核心應(yīng)用程序和微前端之間的安全通信。尋找自己。
這是一個測試游樂場，讓您掌握它的工作方式。嘗試一下，通過SAP在GitHub上查看這個很好的項目。
9. FrintJS
Frintjs是“模塊化JavaScript框架，用于構(gòu)建可擴展和反應(yīng)應(yīng)用程序”。它允許您加載來自單獨的Bundlers中的應(yīng)用程序，為您的應(yīng)用程序提供一個結(jié)構(gòu)，并處理諸如路由，依賴項等所關(guān)注的真實性。該項目還通過其他軟件包支持RN和Vue，但它主要記錄并測試React。
在此處在現(xiàn)場演示游樂場嘗試，或訪問Github上的項目以了解更多內(nèi)容。
10.Mosaic 9
Mosaic是一組服務(wù)，庫以及一個規(guī)范，定義其組件如何相互交互，以支持大規(guī)模網(wǎng)站的微服務(wù)樣式架構(gòu)。Mosaic使用單獨的服務(wù)片段，并根據(jù)模板定義在運行時組成。
它由一堆包組成，包括處理不同的問題，例如路由，布局，模板存儲甚至展示UI。
11. PuzzleJS
Puzzlejs是“用于可擴展和快速網(wǎng)站的微前端框架”。它允許您創(chuàng)建彼此交談的網(wǎng)關(guān)和店面項目。它是由Facebook的BigPipe的啟發(fā)，朝著微觀的方向。
PuzzleJS提供創(chuàng)建網(wǎng)關(guān)或店面(彼此獨立的店面(彼此)，并通過提供配置文件來連接它們。它允許您在編譯時將HTML模板編譯為JavaScript函數(shù)。此操作完全獨立于請求，因此Puzzlejs可以使用此功能發(fā)送第一個塊。它也是SEO友好，并在服務(wù)器端編寫和渲染。并且，當片段所需的API下降時，PuzzleJs保證了其他頁面碎片仍然是工作。這是一個真實的例子。
原文地址：https://www.toutiao.com/i6956751157880422924/
