使用 Module Federation Vite 的 Monorepo 和微前端

✨簡介✨：

莫諾雷波

monorepo 是管理多個相關但獨立專案的單一儲存庫。與單獨的儲存庫相比，它透過實現程式碼重用、簡化依賴關係並促進更好的團隊協作來簡化開發。

微前端

前端的 Web 應用程式架構，可將其分解為更小的、可單獨部署的獨立單元。微前端可以獨立於其他程式碼庫創建和部署，這意味著它們具有更好的靈活性和可擴展性。

模組聯盟和Vite

模組聯合：這是 Webpack 中非常強大的功能，可以從遠端位置動態載入程式碼。

Vite：這是一種更現代的前端構建工具，它允許快速開發伺服器啟動和即時熱模組替換，對現代JavaScript 功能有很好的支持，並透過插件系統擴展其功能.

這些工具可以解決的問題：

• 擴充團隊
• 管理依賴關係
• 提高開發速度

透過結合這些模式和工具，我們可以建立可擴展、可維護且高效能的前端應用程序，以滿足現代 Web 開發的需求。

結合 Monorepos、微前端、模組聯盟和 Vite ??：

影響

透過結合這些技術，您可以創建一個強大而靈活的架構，用於建立大規模、複雜的 Web 應用程式。以下是主要影響的細分：

• 增強的可擴充性：在單一儲存庫中獨立部署和更新微前端。
• 改善開發者體驗：使用 Vite 和簡化的工作流程加快開發速度。
• 最佳化效能： 使用模組聯合按需載入程式碼可減少初始載入時間。
• 更好的可維護性：模組化微前端改進程式碼組織並減少耦合。

??這個理論已經夠多了，讓我們來看看一些行動吧！ ??

怎麼做？

1：設定 Monorepo

選擇單一儲存庫管理工具，例如 Lerna 或 Nx。 （讓我們為這個示範項目選擇Nx）

• 讓我們建立一個資料夾並在其中初始化 Nx 工作區。

mkdir my-monorepo
cd my-monorepo

2：安裝Nx CLI：

• 全域安裝 Nx CLI 到您的系統中

npm add --global nx@latest 

• 初始化Nx工作區

npx create-nx-workspace@latest

• 使用 Nx CLI 在您的工作區中產生新的應用程式和函式庫

nx g @nx/next:application host-app
.
.
.
nx g @nx/react:application my-remote-app
.
.
.
nx g @nx/react:library my-utils

3：配置Vite並實現模組聯盟：

• 在每個微前端的 vite.config.js 中安裝 @originjs/vite-plugin-federation 外掛程式。

npm i @originjs/vite-plugin-federation -D

• 建立一個 vite.config.js （如果不是由 Nx 建立的）並配置它。
• 實作模組聯合包。

主機-應用程式Vite配置：

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [
     react(),
     federation({
      name: 'host-app',
      remoteApp: {},  // add Urls of your remote apps here
     shared: {
        react: {
          singleton: true,
          requiredVersion: '18.2.0',
        },
        'react-dom': {
          singleton: true,
          requiredVersion: '18.2.0',
        },
      },
    }),
  ],
});

遠端應用程式 Vite 配置：

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [
     react(),
     name: 'my-remote-app', // unique app name for your remote module
     filename: 'remoteEntry.js',
     exposes: {}, // add the path of any components you want to expose to the host app
     shared: {
       react: {
         singleton: true,
         requiredVersion: '18.2.0',
       },
       'react-dom': {
         singleton: true,
         requiredVersion: '18.2.0',
       },
     },
    }),
  ],
});

您的專案結構應如下所示

my-monorepo/
├── apps/
│   ├── host-app/
│   │   ├── package.json
│   │   ├── vite.config.js
│   │   ├── src/
│   │   └── ...
│   ├── my-utils/
│   │   ├── package.json
│   │   ├── src/
│   │   └── ...
│   └── my-remote-app/
│       ├── package.json
│       ├── vite.config.js
│       ├── src/
│       └── ...
└── nx.json

？恭喜，您的應用程式現已配置完畢。 ？
現在，繼續建立一個元件並將其公開給主機應用程式。

如何為主機新增遠端組件？

假設您已將元件公開為“AppComponent”，並且您的遠端名稱為“remoteApp”

const RemoteComponent = React.lazy(() => import('remoteApp/AppComponent'));

<Suspense fallback={<>Loading....</>}>
  <RemoteComponent />
</Suspense>

*注意：* 確保將遠端 URL 新增至主機的 vite.config.js 檔案中。

現實世界場景??：

大型電商平台：同一個團隊可以獨立處理產品頁面、結帳流程和使用者帳號。
企業應用：功能可以由共享平台內的不同部門管理。
不同的團隊可以建立和維護單獨的小部件或儀表板。

？在這裡查看我的示範專案程式碼??：Monorepo 專案

結論

Monorepos、微前端、模組聯盟和 Vite，利用上述所有技術的優勢，可以幫助組織建立可擴展、可維護和高效能的 Web 應用程序，滿足現代開發和業務需求。

其他資源：

Nx 文件
Vite文檔
Webpack 模組聯盟
微前端架構

如果您在為您的專案實施此設定時有疑問或需要協助，請隨時與我們聯絡。讓我們建立一些令人驚奇的東西！ ？

以上是使用 Module Federation Vite 的 Monorepo 和微前端的詳細內容。更多資訊請關注PHP中文網其他相關文章！