使用 Module Federation Vite 的 Monorepo 和微前端-js教程-PHP中文網

Monorepo and Micro-Frontends Using Module Federation Vite

✨簡介✨：

莫諾雷波

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中文網其他相關文章！