• 简体中文

      • Rsbuild

      帮助用户快速在 Rsbuild App 或 Rslib 中构建 Module Federation 产物

      快速开始

      安装

      你可以通过如下的命令安装插件：

      npm
      yarn
      pnpm
      bun
      npm add @module-federation/rsbuild-plugin --save-dev

      注册插件

      Rsbuild App

      rsbuild.config.ts
      import { pluginModuleFederation } from '@module-federation/rsbuild-plugin';
import { defineConfig } from '@rsbuild/core';
import { pluginReact } from '@rsbuild/plugin-react';

export default defineConfig({
  server: {
    port: 2000,
  },
  plugins: [
    pluginReact(),
    pluginModuleFederation({
      name: 'federation_consumer',
      remotes: {
        remote1: 'remote1@http://localhost:2001/mf-manifest.json',
      },
      shared: ['react', 'react-dom'],
    }),
  ],
});

      Rslib Module

      rslib.config.ts
      import { pluginModuleFederation } from '@module-federation/rsbuild-plugin';
import { defineConfig } from '@rslib/core';

export default defineConfig({
  lib: [
    // ...
    {
      format: 'mf',
      output: {
        distPath: {
          root: './dist/mf',
        },
        assetPrefix: 'xxx',
      },
      plugins: [
        // ...
        pluginModuleFederation({
          name: 'rslib_provider',
          exposes: {
            '.': './src/index.tsx',
          },
          shared: {
            react: {
              singleton: true,
            },
            'react-dom': {
              singleton: true,
            },
          },
        }),
      ],
    },
  ],
});

      注意

      如果需要使用 Module Federation 运行时能力，请安装 @module-federation/enhanced

      配置

      • 类型：
      export declare const pluginModuleFederation: (moduleFederationOptions: ModuleFederationOptions, rsbuildOptions?: RSBUILD_PLUGIN_OPTIONS) => RsbuildPlugin;

type RSBUILD_PLUGIN_OPTIONS = {
  target?: 'web' | 'node' | 'dual';
  ssr?: boolean;
  ssrDir?: string;
  environment?: string;
}

      moduleFederationOptions

      Module Federation 配置项

      rsbuildOptions

      Rsbuild 插件额外配置。

      target

      Tip

      target: 'dual' 仅支持 Rslib/Rspress 全局插件。

      • 类型：'web' | 'node' | 'dual'
      • 默认值：'web'

      用于指定产物的运行目标环境。当设置为 dual 时，会同时构建 Web（浏览器）产物与 Node.js（SSR）产物。

      使用 target: 'dual' 生成 SSR 产物后，可参考 创建 Modern.js 消费者 创建消费者，并接入对应的 Rslib SSR 生产者进行开发。

      对于 Rsbuild App 的 SSR，可使用 target: 'node' + environment，将 Module Federation 应用到指定环境。

      rsbuild.config.ts
      import { pluginModuleFederation } from '@module-federation/rsbuild-plugin';
import { defineConfig } from '@rsbuild/core';

export default defineConfig({
  environments: {
    client: {},
    ssr: {},
  },
  plugins: [
    pluginModuleFederation(
      {
        name: 'host',
        remotes: {
          remote: 'remote@http://localhost:3001/mf-manifest.json',
        },
      },
      {
        target: 'node',
        environment: 'ssr',
      },
    ),
  ],
});

      environment

      • 类型：string
      • 默认值：按调用方/工具自动推断：
        • Rslib：'mf'
        • Rsbuild App + target: 'web'：'web'
        • Rsbuild App + target: 'node'：'node'
        • Rspress + target: 'web'：'web'
        • Rspress + target: 'node'：'node'

      在 target: 'node' 下用于指定要应用 Node Federation 行为的环境名称。

      ssr

      废弃警告

      该配置项已废弃，请使用 target: 'dual' 来开启 SSR 功能。

      • 类型：boolean
      • 默认值：false

      开启后可以生成 SSR 产物。