• 简体中文

      • Rspress

      注意

      需要 Rspress 2.0.0-beta.16 及以上版本。

      帮助用户在 Rspress 中构建、消费 Module Federation 产物

      快速开始

      安装

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

      npm
      yarn
      pnpm
      bun
      npm add @module-federation/rspress-plugin

      创建 module-federation.config.ts

      创建 module-federation.config.ts 文件，内容如下：

      module-federation.config.ts
      import { createModuleFederationConfig } from '@module-federation/rspress-plugin';

export default createModuleFederationConfig({
  filename: 'remoteEntry.js',
  name: 'mf_doc',
  exposes: {
    './intro-en': './docs/en/guide/intro.mdx',
    './intro-zh': './docs/zh/guide/intro.mdx',
  },
});

      注册插件

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

export default defineConfig({
  // ...
  plugins: [pluginModuleFederation(mfConfig)],
  builderConfig: {
    output: {
      assetPrefix: 'https://module-federation.io/',
    },
  },
});

      加载文档片段

      你可以直接在 mdx 文件中加载导出的文档片段。

      docs/en/guide/intro.mdx
      import Intro from 'mf-doc/intro-zh';

{/* 文档片段支持传参，以 props 方式去消费 */}
<Intro cmdTools={['a','b']} />

      文档片段支持传参，以 props 方式去消费。

      假设你需要在文档片段中使用 cmdTools 变量，可以参考下方内容：

      docs/zh/guide/intro.mdx
      {(props.cmdTools || ['pkg-a', 'pkg-b']).map(cmdTool=>(<code>{cmdTool}</code>))}

      配置

      • 类型：
      export declare const pluginModuleFederation: (
  moduleFederationOptions: ModuleFederationOptions,
  rspressOptions?: RspressPluginOptions,
) => RspressPlugin;

type RspressPluginOptions = {
  autoShared?: boolean;
  rebuildSearchIndex?: boolean;
};

      moduleFederationOptions

      Module Federation 配置项

      rspressOptions

      Rspress 插件额外配置。

      autoShared

      • 类型：boolean
      • 默认值：true

      Rspress 使用了 react、react-dom、@mdx-js/react 第三方依赖，并且上述三个依赖需要保证单利，因此在构建时会自动注入 shared 配置。

      你也可以设置 autoShared: false 来禁用此行为。

      默认 shared 配置如下：

        react: {
    singleton: true,
    requiredVersion: false,
  },
  'react-dom': {
    singleton: true,
    requiredVersion: false,
  },
  'react/': {
    singleton: true,
    requiredVersion: false,
  },
  'react-dom/': {
    singleton: true,
    requiredVersion: false,
  },
  '@mdx-js/react': {
    singleton: true,
    requiredVersion: false
  },
  '@rspress/core/runtime': {
    singleton: true,
    requiredVersion: false
  }

      rebuildSearchIndex

      • 类型：boolean
      • 默认值：true

      Rspress 构建时会自动生成搜索索引，但是生成过程仅支持 .mdx 或 .md 文件，因此当加载了模块联邦的文档片段时，该文档片段不会被搜索到。

      为了避免此行为，MF Rspress Plugin 会在 SSG 完成后根据渲染完成的 html 重新生成搜索索引以支持搜索功能。

      如果你采用了 remoteSearch 或其他搜索功能，可以设置 rebuildSearchIndex: false 来禁用此行为。

      注意：该功能仅在 ssg 模式下生效。

      FAQ

      是否支持 local search ？

      仅支持 ssg 模式，详情参考 rebuildSearchIndex。

      Could not parse expression with swc: Expression expected"

      当引用 MDX 组件时，可能会遇到如下错误：

      File: "/root/docs/zh/guide/basic/mf.mdx"
Error: "23:8: Could not parse expression with swc: Expression expected"

      这是 Rspress 在解析 MDX 组件时未能正确解析表达式的问题，可以通过以下方式解决：

      import RemoteIntroDoc from 'mf-doc/intro';
import Head from '@components/Head';
+ import React from 'react';

- <RemoteIntroDoc head={<Head />} />
+ <RemoteIntroDoc head={React.createElement(Head)}/>