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のバージョンが使用されます。

FAQ#

• ビルド出力でダウングレードされていない構文が見つかりましたか？

  レガシーブラウザとの互換性が必要な場合は、構文ダウングレードのために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',
              },
            },
          },
        },
      ],
    },
  };