ModuleFederationPlugin#

此外掛實作了 Module Federation 1.5。

範例#

const rspack = require('@rspack/core');

module.exports = {
  output: {
    // set uniqueName explicitly to make HMR works
    uniqueName: 'app',
  },
  plugins: [
    new rspack.container.ModuleFederationPlugin({
      // options
    }),
  ],
};

選項#

implementation#

• 類型：string

提供一個路徑作為 Module Federation 1.5 運行時的實作，預設為 @module-federation/runtime-tools。

runtimePlugins#

• 類型：string[]

提供執行 Module Federation 1.5 所需的外掛，可以擴展 Module Federation 的行為和功能。

name#

• 類型：string

定義目前建置中，暴露給其他容器的唯一名稱。此名稱將作為遠端容器的全域變數存在。

filename#

• 類型：string

指定遠端容器進入點檔案的檔名。其他容器將透過此檔案載入暴露的模組。

runtime#

• 類型：string | false

定義遠端容器進入點的運行時區塊。

library#

• 類型：LibraryOptions

定義遠端容器進入點的輸出格式。預設的 libraryType 為 "var"。

shareScope#

• 類型：string

定義目前容器中共享相依性的命名空間。透過設定不同容器之間的共享範圍，可以控制模組的共享行為，包括決定哪些模組在不同容器之間共享。預設的共享範圍為 "default"。

shareStrategy#

• 類型：'version-first' | 'loaded-first'

控制共享相依性的載入策略

• 'version-first'：版本優先。設定後，所有遠端進入點檔案將自動載入並註冊對應的共享相依性，以確保可以取得所有共享相依性的版本。當有嚴格的版本需求時，建議使用此策略。

• 'loaded-first'：優先重複使用。設定後，遠端進入點檔案將不會自動載入（僅在需要時才會載入），並且將優先重複使用註冊的共享相依性。當對版本沒有嚴格要求且需要效能時，建議使用此策略。

remoteType#

• 類型：ExternalsType

定義如何載入遠端容器，預設為 "script"，透過 <script /> 標籤載入。

remotes#

• 類型

  type Remotes = (RemotesItem | RemotesObject)[] | RemotesObject;
  type RemotesItem = string;
  type RemotesItems = RemotesItem[];
  interface RemotesObject {
    [k: string]: RemotesConfig | RemotesItem | RemotesItems;
  }
  interface RemotesConfig {
    external: RemotesItem | RemotesItems;
    shareScope?: string;
  }

將遠端載入的模組及其位址的定義。鍵是遠端容器的名稱，值是遠端容器暴露的全域變數名稱和遠端容器進入點的 URL。您也可以指定 shareScope 以控制遠端容器是否共享相依性。

exposes#

• 類型

  type Exposes = (ExposesItem | ExposesObject)[] | ExposesObject;
  type ExposesItem = string;
  type ExposesItems = ExposesItem[];
  interface ExposesObject {
    [k: string]: ExposesConfig | ExposesItem | ExposesItems;
  }
  interface ExposesConfig {
    import: ExposesItem | ExposesItems;
    name?: string;
  }

定義遠端容器如何參考本地模組。鍵是在遠端容器中作為遠端模組參考時的模組名稱，值是相對於目前資料夾的模組路徑。您可以提供名稱以指定暴露的本地模組的名稱。

shared#

• 類型

  type Shared = (SharedItem | SharedObject)[] | SharedObject;
  type SharedItem = string;
  interface SharedObject {
    [k: string]: SharedConfig | SharedItem;
  }
  interface SharedConfig {
    import?: false | SharedItem;
    eager?: boolean;
    packageName?: string;
    requiredVersion?: false | string;
    shareKey?: string;
    shareScope?: string;
    singleton?: boolean;
    strictVersion?: boolean;
    version?: false | string;
  }

指定哪些相依性應為共享相依性。這允許多個微前端共享相依性程式庫的相同實例，以避免重複載入相同的程式碼。它可以是一個物件字典，其中鍵是共享模組的名稱，值是組態或版本字串。它也可以是一個陣列，其中陣列項目是共享套件名稱或組態。

SharedConfig 可以包含以下子選項

• import：應該放在共享模組的共享範圍中的模組。如果無法在共享模組的共享範圍中找到共享模組，或版本無效，則可以使用此提供的模組作為後備模組。
• eager：如果設定為 true，則共享模組將在初始區塊中載入，而不是在使用時動態載入。這表示無論是否已使用，共享模組都將與主要進入點一起載入。這可以消除動態載入造成的延遲，但會增加初始套件的大小。另外，請注意，啟用此設定後，所有提供的模組和後備模組都將始終下載。
• packageName：用於從 package.json 確定套件名稱和所需的版本。僅當無法根據請求自動確定套件名稱時，才需要組態。
• requiredVersion：接受語意版本號碼。例如，"^1.2.3"。用於設定共享模組的版本範圍。如果遠端容器的模組版本不符合此範圍，則不會載入該模組。
• shareKey：使用此鍵在共享模組的共享範圍中搜尋要求的共享模組。預設值為共享模組的名稱。
• shareScope：定義共享模組的共享範圍。這允許不同的建置獨立使用自己的共享範圍，而不會發生衝突。預設的共享範圍為 "default"。
• singleton：確保在不同版本之間，共享模組僅載入一次，遵循單例模式。對於設計為以單例模式執行的程式庫（例如 React）而言，這是必要的，因為它可以防止由於實例化多個程式庫實例而導致的各種問題。
• strictVersion：用於強化 requiredVersion。如果設定為 true，則共享模組必須與 requiredVersion 中指定的版本完全符合，否則將報告錯誤，且不會載入該模組。如果設定為 false，則可以容忍不精確的匹配。
• version：明確設定共享模組的版本。預設情況下，將使用 package.json 中的版本。

常見問題#

• 在建置輸出中找到未降級的語法？

  如果您需要與舊版瀏覽器相容，請加入 builtin:swc-loader 來降級語法，並確保它與 @module-federation/runtime 和 @module-federation/sdk 相符。以下是一個範例：

  module.exports = {
    module: {
      rules: [
        {
          include: [
            /@module-federation[\\/]sdk/,
            /@module-federation[\\/]runtime/,
          ],
          use: {
            loader: 'builtin:swc-loader',
            options: {
              jsc: {
                target: 'es5',
              },
            },
          },
        },
      ],
    },
  };