使用單 Spa 建造微前端：指南

TL;DR: 使用單一Spa 建立微前端可以更輕鬆地將大型應用程式拆分為小的獨立部分，以便不同的團隊可以在不影響其他團隊的情況下處理各個部分。本部落格展示如何建立 Angular 和 React 微前端、將它們連接到根配置並進行部署。

微前端已成為擴展前端應用程式的流行架構風格，特別是當多個團隊在使用者介面的不同部分工作時。透過將整體前端分解為更小的獨立模組，團隊可以單獨部署、更新和擴展應用程式的各個部分。本文將討論如何使用 single-spa 創建和連接不同框架的微前端。

單水療中心簡介

Single-spa 是一個基於 JavaScript 的框架，專為微前端架構設計。它允許您使用 Angular、React 和 Vue 等框架來建立微前端，並將它們作為單一應用程式提供服務。它維護連接的應用程式的註冊並使用路由將用戶重定向到不同的應用程式。

使用單SPA框架有許多好處，例如為應用程式的不同部分選擇不同的語言、微前端的獨立開發和部署以及可擴展性。那麼，讓我們開始創建一個單一的水療中心。

創建單一水療中心

先決條件

要實現單一 Spa，安裝 Node.js 和 npm 非常重要。要安裝它們，請訪問 Node.js 網站並下載適合您的作業系統的最新版本。執行安裝程式完成安裝。

然後，透過在命令提示字元中執行以下命令來驗證 node.js 和 npm 安裝。

第 1 步：設定項目

在此範例中，將使用 Angular 和 React 建立兩個簡單的微前端。根配置將為兩個微前端提供服務。

創建一個應用程式

我們可以透過執行以下命令來創建一個簡單的 Angular 微前端應用。

建立專案後，執行下一個指令來安裝 single-spa 函式庫。

正確安裝庫後，將在 Angular 專案中建立一個名為 main.single-spa.ts 的文件，其中包含與 single-spa 相關的所有配置。

參考設定碼。

需要提供 APP_BASE_HREF 值才能作為單一 SPA 運作。

此外，新增單 Spa 庫後，package.json 將包含兩個額外的腳本。

angular.json 檔案將使用以下配置進行修改。

「main」: “src/main.ts” 將替換為 「main」: “src/main.single-spa.ts”。新的建置配置將作為 JavaScript 模組新增。

設定完成並驗證後，我們可以使用以下命令提供 Angular 應用程式。

現在我們已經成功創建了微前端應用程序，讓我們看看如何實現root-config。

根配置

執行以下命令來建立根配置。

輸入此指令後，將出現一系列設定來建立根配置。

選擇先前的配置後，將建立根配置來服務多個前端。

要將已建立的微前端連接到 root-config，我們需要修改 root-config.ts 和 index.ejs 檔案。

如前面的程式碼區塊所述，建立的微前端應匯入到 root-config.ts 檔案中。

以下腳本應加入 index.ejs 檔案中。

創建了微前端( @org/angular-spa-frontend )，以及微前端的URL ( http://localhost:4200/main.js )前端已託管，必須新增到匯入映射中。

然後，執行以下命令來執行應用程式。

假設這些步驟正確完成，我們應該能夠在視圖中看到最終的單 Spa，類似於下圖。

第 2 步：生產中部署

在生產中部署這些微前端時，建議將每個微前端應​​用程式部署為獨立的應用程式。根配置可能會動態載入每個應用程序，具體取決於 registerApplication.

中設定的應用程式路由

第 3 步：新增更多微前端

要增加更多微前端，請重複前面提到的步驟。讓我們看看如何將 React 微前端整合到同一個根配置中。

使用以下指令建立一個新的 React 微前端。

然後，導航到建立的專案並安裝 single-spa-react。

修改入口檔案匯出生命週期方法，使應用程式相容於single-spa。

設定完成後，我們可以使用以下指令為 React 微前端提供服務。

要將建立的微前端與現有的 root-config 集成，請將 root-config 中的檔案進行以下修改。

您還需要使用 React 應用程式的主包路徑更新 index.ejs 檔案。

GitHub 參考

在此 GitHub 演示中查看此單 Spa 應用程式的完整程式碼範例。

結論

使用 single-spa 建立微前端可以更輕鬆地將大型應用程式拆分為小的獨立部分。這樣，不同的團隊就可以在不影響其他團隊的情況下工作，並使用他們喜歡的框架，例如 Angular 或 React。按照本指南中的步驟，您可以設定單 SPA 項目，連接多個微前端，並為使用者提供流暢的體驗。 Single-spa 讓您可以輕鬆地隨著時間的推移擴展您的應用程式並根據需要添加新功能。

相關部落格

• 使用 RxJS 掌握非同步 JavaScript
• Axios 和 Fetch API？選擇正確的 HTTP 用戶端
• TypeScript 實用程式類型：完整指南
• 安全 JWT 儲存：最佳實踐

以上是使用單 Spa 建造微前端：指南的詳細內容。更多資訊請關注PHP中文網其他相關文章！