logologo
指南
实践
配置
插件
案例
博客
生态
Module Federation Examples
Practical Module Federation
Zephyr Cloud
Nx
简体中文
English
指南
实践
配置
插件
案例
博客
Module Federation Examples
Practical Module Federation
Zephyr Cloud
Nx
简体中文
English
logologo

开始

介绍
设置环境
快速上手
功能导航
名词解释
npm 包

基础

运行时

Runtime 接入
Runtime API
Runtime Hooks
Rsbuild Plugin
Rspack 插件
Webpack Plugin
Rspress Plugin
Vite Plugin
Metro
类型提示
命令行工具
样式隔离

数据管理

数据获取
数据缓存
Prefetch

框架

Modern.js
Next.js

部署

使用 Zephyr Cloud 部署

调试

开启调试模式
Chrome Devtool
全局变量

Troubleshooting

概览

运行时

RUNTIME-001
RUNTIME-002
RUNTIME-003
RUNTIME-004
RUNTIME-005
RUNTIME-006
RUNTIME-007
RUNTIME-008
RUNTIME-009

构建

BUILD-001
BUILD-002

类型

概览
TYPE-001
其他
Edit this page on GitHub
Previous PageRuntime Hooks
Next PageRspack 插件

#Rsbuild Plugin

帮助用户快速在 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 = {
  ssr?: boolean;
}

#moduleFederationOptions

Module Federation 配置项

#rsbuildOptions

Rsbuild 插件额外配置。

#ssr

TIP

仅支持 Rslib 全局插件。

  • 类型:boolean
  • 默认值:false

开启后可以生成 SSR 产物。

示例:

先通过 npm create module-federation@next 创建 Rslib 项目:

# 这里传递了 template role name 三个参数,你也可以直接执行 npm create module-federation@latest ,然后根据提示进行选择
npm create module-federation@next -- --template provider-rslib --role provider --name rslib_ssr_provider

然后修改 rslib.config.ts 配置,增加 ssr:true :

rslib.config.ts
- plugins: [pluginReact(), pluginModuleFederation(moduleFederationConfig)],
+ plugins: [pluginReact(), pluginModuleFederation(moduleFederationConfig, { ssr: true })],

安装依赖,并启动项目:

pnpm install
pnpm run mf-dev

此时会生成 dist/mf/ssr 目录,里面包含了 SSR 产物。

然后参考创建 Modern.js 消费者 章节,创建消费者,并引用 Rslib SSR 生产者,随后启动项目开发。