logologo
指南
实践
配置
插件
案例
博客
生态
Module Federation Examples
Practical Module Federation
Zephyr Cloud
Nx
简体中文
English
指南
实践
配置
插件
案例
博客
Module Federation Examples
Practical Module Federation
Zephyr Cloud
Nx
简体中文
English
logologo
Overview
name
filename
remotes
exposes
shared
runtimePlugins
getPublicPath
implementation
dts
dev
manifest
shareStrategy
experiments
Edit this page on GitHub
Previous Pageshared
Next PagegetPublicPath

#runtimePlugins

  • 类型:string[] | Array<[string, Record<string, unknown>]>
  • 是否必填:否
  • 默认值:undefined

用于添加运行时需要的额外插件。值可以是:

  • 表示具体插件路径的字符串(支持绝对/相对路径、包名)
  • 一个数组,其中每个元素可以是字符串或元组 [字符串路径, 对象配置]

通过「插件系统」了解更多关于如何开发 runtimePlugin 细节。

设置后,运行时插件会自动在构建时注入并使用。

  • 示例

基础用法: 创建运行时插件文件: custom-runtime-plugin.ts

custom-runtime-plugin.ts
import { ModuleFederationRuntimePlugin } from '@module-federation/enhanced/runtime';

export default function (): ModuleFederationRuntimePlugin {
  return {
    name: 'custom-plugin-build',
    beforeInit(args) {
      console.log('[build time inject] beforeInit: ', args);
      return args;
    },
    beforeLoadShare(args) {
      console.log('[build time inject] beforeLoadShare: ', args);

      return args;
    },
  };
}

在构建配置应用此插件:

rspack.config.ts
const path = require('path');
module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      name: 'host',
      remotes: {
        'manifest-provider':
          'manifest_provider@http://localhost:3011/mf-manifest.json',
      },
      runtimePlugins: [path.resolve(__dirname, './custom-runtime-plugin.ts')],
    }),
  ],
};

带参数用法: 你还可以通过使用元组格式为运行时插件提供配置选项:

rspack.config.ts
const path = require('path');
module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      name: 'host',
      remotes: {
        'manifest-provider':
          'manifest_provider@http://localhost:3011/mf-manifest.json',
      },
      runtimePlugins: [
        path.resolve(__dirname, './custom-runtime-plugin.ts'),
        [
          path.resolve(__dirname, './another-plugin.ts'),
          {
            debug: true,
            timeout: 5000,
            customConfig: 'value'
          }
        ]
      ],
    }),
  ],
};

插件可以访问这些配置选项:

another-plugin.ts
import { ModuleFederationRuntimePlugin } from '@module-federation/enhanced/runtime';

export default function (options: any): ModuleFederationRuntimePlugin {
  console.log('插件配置:', options);

  return {
    name: 'another-plugin',
    beforeInit(args) {
      if (options.debug) {
        console.log('[调试] beforeInit: ', args);
      }
      return args;
    },
  };
}