最新 umi4-max 如何使用 webpack5 聯邦模組

ESnail發表於2023-03-19
Web

新專案用 umi4-max 搭建，部分功能想要使用其他專案的功能，不想重新開發，想到了使用 webpack5 的聯邦模組，可以直接引用其他專案程式碼來實現共享程式碼。

理想很美好，現實很殘酷。直接按照 webpack5 聯邦模組的使用方法，並不能成功，而官方文件沒有明確說明如何使用。

webpack 聯邦模組如何使用呢？

理解：

  • 使用場景：專案A有一個功能，專案B也想用。此時可以用。
  • 使用前提：依賴 webpack5，且主要依賴相同（如都依賴react)

說明：專案A需要用專案B的程式碼，專案A為匯入專案，專案B為匯出專案。

相關配置欄位說明：

欄位名 型別 含義
name string 必傳值，即輸出的模組名，被遠端引用時路徑為 name/{name}/name/
library string 宣告全域性變數的方式，name 為 umd 的 name
filename string 構建輸出的檔名
remotes object 遠端引用的應用名及其別名的對映，使用時以 key 值作為 name
exposes object 被遠端引用時可暴露的資源路徑及其別名
shared object 與其他應用之間可以共享的第三方依賴，使你的程式碼中不用重複載入同一份依賴

1. 普通專案

1.1 匯出專案

配置要匯出的功能模組

// 配置檔案

const { ModuleFederationPlugin } = require("webpack").container;
const packageDeps = require('../package.json').dependencies

new ModuleFederationPlugin({
  name: "app1",
  filename: "remoteEntry.js",
  // 表示匯出的模組，只有在此申明的模組才可以作為遠端依賴被使用。
  exposes: {
    "./CounterAppOne": "./src/components/CounterAppOne",
  },
  shared: {
    ...packageDeps,
    react: { singleton: true, eager: true, requiredVersion: deps.react },
    "react-dom": {
      singleton: true,
      eager: true,
      requiredVersion: deps["react-dom"],
    },
    "react-router-dom": {
      singleton: true,
      eager: true,
      requiredVersion: deps["react-router-dom"],
    },
  },
})

1.2 匯入專案

配置要匯入的功能模組的檔案地址

// 配置檔案

const { ModuleFederationPlugin } = require("webpack").container;
const packageDeps = require('../package.json').dependencies

new ModuleFederationPlugin({
  name: "container",
  // 將其它專案的 name 對映到當前專案中
  remotes: {
    app1: 'app1@http://localhost:3001/remoteEntry.js',
  },
  // 是非常重要的引數，制定了這個引數，可以讓遠端載入的模組對應依賴改為使用本地專案的 React 或 ReactDOM。
  shared: {
    ...packageDeps,
    react: { singleton: true, eager: true, requiredVersion: deps.react },
    "react-dom": {
      singleton: true,
      eager: true,
      requiredVersion: deps["react-dom"],
    },
    "react-router-dom": {
      singleton: true,
      eager: true,
      requiredVersion: deps["react-router-dom"],
    },
  },
})

react 專案中使用

// 透過 webpack 關聯其它應用，然後按需載入
const CounterAppOne = React.lazy(() => import("app1/CounterAppOne"))

export default () => {
  return (
  	<React.Suspense fallback={<div>Loading</div>}>
      <CounterAppOne />
    </React.Suspense>
  )
}

2. umi3 專案

2.1 匯出專案

配置

// .umirc.ts

publicPath:'http://127.0.0.1:5502/',
webpack5: {}, // 開啟 webpack5 
chainWebpack: (config) => {
  config.output.publicPath('auto'); // 路徑處理，保證匯入專案路徑正確

  const { ModuleFederationPlugin } = require("webpack").container;
  const packageDeps = require('./package.json').dependencies

  config.plugin('mf').use(ModuleFederationPlugin, [{
    name: "app1",
    filename: 'remoteEntry.js',
    exposes: {
      "./Test": '@/pages/test.tsx',
    },
    shared: { react: { eager: true }, "react-dom": { eager: true } },
  }])
  return config;
}

2.2 匯入專案

安裝外掛：yarn install umi-plugin-mf-bootstrap 支援入口非同步匯入，以便支援使用 hooks。如果不安裝，會報錯 Uncaught Error: Shared module is not available for eager consumption。具體原因為：違背了 hooks 的使用規則，不能用兩個 React 例項。

外掛內容：

import { IApi } from 'umi';
import { resolve } from 'path';
import { readFileSync } from 'fs';

export default (api: IApi) => {

  api.onGenerateFiles(() => {
    const buffer= readFileSync(resolve('./src/.umi/umi.ts'))
    const c = String(buffer)
    // console.log()
    api.writeTmpFile({
      path: 'index.ts',
      content: c,
    });
    api.writeTmpFile({
      path: 'umi.ts',
      content: 'import("./index")',
    });
  });
};

配置

// .umirc.ts

dynamicImport:{},
webpack5: {}, // 開啟 webpack5
chainWebpack: (config) => {
  const { ModuleFederationPlugin } = require("webpack").container;
  config.plugin('mf').use(ModuleFederationPlugin, [{
    name: "app2",
    remotes: {
      "app1": "app1@http://127.0.0.1:5502/dist/remoteEntry.js",
    },
    shared: { react: { eager: true }, "react-dom": { eager: true } },
  }])
  return config;
}

使用和普通專案一致

3. umi4-max 專案

按照 umi3 的方案，沒有成功。多方查閱摸索後，最終透過查閱官方 github 程式碼，看到有個外掛中有個 mf 的檔案，閱讀程式碼後，摸索出最終的方案了。

匯出專案配置和 umi3 的一致，而匯入專案只需按照下面的配置即可，使用和普通專案一致。

// .umirc.ts

mf: {
  name: 'app2',
  remotes: [
    {
      name: 'app1',
      entry: 'http://127.0.0.1:5502/dist/remoteEntry.js'
    },
  ],
  shared: { react: { eager: true }, "react-dom": { eager: true } },
}

關於 mf 外掛的詳細使用：可參考官方 github 程式碼 Module Federation 外掛，後來找到的。

其他相關實現：

  • 原始碼 mf 外掛實現 mf
  • 原始碼 mfsu mf實現 MFImport

4. vite 專案

安裝外掛 vite-plugin-federation

4.1 匯出專案

配置

// vite.config.js 或 rollup.config.js

import federation from "@originjs/vite-plugin-federation";
export default {
  plugins: [
    federation({
      name: "remote-app",
      filename: "remoteEntry.js",
      // 需要暴露的模組
      exposes: {
        "./Button": "./src/Button.vue",
      },
      shared: ["vue"],
    }),
  ],
};

4.2 匯入專案

配置

// vite.config.js 或 rollup.config.js

import federation from "@originjs/vite-plugin-federation";
export default {
  plugins: [
    federation({
      name: "host-app",
      remotes: {
        remote_app: "http://localhost:5001/assets/remoteEntry.js",
      },
      shared: ["vue"],
    }),
  ],
};

react 專案中使用

// dynamic import
const myButton = React.lazy(() => import('remote/myButton'))

// static import
import myButton from 'remote/myButton'

備註：React 使用 federation 問題解決：

建議檢視這個 Issue，裡面包含了大多數 React 相關的問題

常見問題：遠端模組載入本地模組的共享依賴失敗，報錯:

localhost/:1 Uncaught (in promise) TypeError: Failed to fetch dynamically imported module: http:your url

原因：Vite 在啟動服務時對於 IP、Port 有自動獲取邏輯，在 Plugin 中還沒有找到完全對應的獲取邏輯，在部分情況下可能會出現獲取失敗。

解決：

在本地模組顯式到宣告 IP、Port、cacheDir，保證我們的 Plugin 可以正確的獲取和傳遞依賴的地址。

// 本地模組的 vite.config.ts

export default defineConfig({
  server:{
    https: "http",
    host: "192.168.56.1",
    port: 5100,
  },
  cacheDir: "node_modules/.cacheDir",
}

建議閱讀：

參考：

相關文章