Rspress Plugin
帮助用户在 Rspress 中构建、消费 Module Federation 产物
快速开始
安装
你可以通过如下的命令安装插件：
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/config';
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
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/runtime': {
singleton: true,
requiredVersion: false
}
rebuildSearchIndex
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)}/>
