close
指南
配置
插件
API
博客
关于
贡献
指南
配置
插件
API
博客
关于
贡献

模块联邦插件

该插件实现了 模块联邦 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
    }),
  ],
};

选项

实现

  • 类型: string

提供一个路径作为模块联邦 1.5 运行时的实现，默认值为 @module-federation/runtime-tools.

运行时插件

  • 类型: string[]

提供运行模块联邦 1.5 所需的插件，它可以扩展模块联邦的行为和功能。

名称

  • 类型: string

定义在当前构建中暴露给其他容器的唯一名称。该名称将作为远程容器的全局变量存在。

文件名

  • 类型: string

指定远程容器入口文件的名称。其他容器将通过该文件加载暴露的模块。

运行时

  • 类型: string | false

为远程容器入口定义运行时块。

库

定义远程容器入口的输出格式。默认 libraryType 为“var”。

共享范围

  • 类型: string

定义当前容器中共享依赖项的命名空间。通过在不同容器之间配置共享范围，可以控制模块的共享行为，包括确定哪些模块在不同容器之间共享。默认共享范围为 "default"。

共享策略

  • 类型: 'version-first' | 'loaded-first'

控制共享依赖项的加载策略

  • 'version-first': 版本优先。设置后，所有 远程 入口文件将自动加载并 注册 对应的共享依赖项，以确保所有共享依赖项的版本都可以获得。在存在严格的版本要求时，推荐使用此策略。

  • 'loaded-first': 优先重用。设置后，远程 入口文件不会自动加载（只有在需要时才会加载），并且注册的共享依赖项将优先重用。在没有严格的版本要求，并且需要性能时，推荐使用此策略。

远程类型

定义如何加载远程容器，默认为 "script"，通过 <script /> 标签加载。

远程

  • 类型 
    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 来控制远程容器是否共享依赖项。

暴露

  • 类型 
    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;
}

定义本地模块如何在远程容器中被引用。键是模块在远程容器中被引用时的名称，值是相对于当前文件夹的模块路径。您可以提供一个名称来指定暴露的本地模块的名称。

共享

  • 类型 
    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 可以包含以下子选项

  • 导入: 应该放在共享模块的共享范围内的模块。如果在共享模块的共享范围内找不到共享模块，或者版本无效，可以使用提供的模块作为回退模块。
  • 渴望: 如果设置为 true，共享模块将加载到初始块中，而不是在使用时动态加载。这意味着共享模块将与主入口点一起加载，无论它是否已被使用。这可以消除动态加载带来的延迟，但会增加初始包的大小。此外，请注意，当启用此配置时，所有提供的模块和回退模块都将始终下载。
  • 包名: 用于从 package.json 中确定包名和所需版本。仅当无法根据请求自动确定包名时才需要配置。
  • 所需版本: 接受语义版本号。例如，"^1.2.3"。用于设置共享模块的版本范围。如果远程容器的模块版本不符合此范围，则该模块将不会加载。
  • 共享键: 使用此键在共享模块的共享范围内搜索请求的共享模块。默认值为共享模块的名称。
  • 共享范围: 定义共享模块的共享范围。这允许不同的构建独立使用自己的共享范围，而不会产生冲突。默认共享范围为 "default"。
  • 单例: 确保共享模块在不同版本之间只加载一次，遵循单例模式。对于旨在作为单例运行的库（例如 React）来说，这是必需的，因为它可以防止由于实例化多个库实例而导致的各种问题。
  • 严格版本: 用于加强 requiredVersion。如果设置为 true，共享模块必须完全匹配 requiredVersion 中指定的版本，否则将报告错误，并且该模块将不会加载。如果设置为 false，则可以容忍不精确的匹配。
  • 版本: 显式设置共享模块的版本。默认情况下，将使用 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',
            },
          },
        },
      },
    ],
  },
};