构建能力扩展

Rsbuild

Rspress 底层基于 Rsbuild 来进行文档构建。

Rsbuild 配置

Rsbuild 提供了丰富的构建配置，你可以使用 builderConfig 来自定义这些配置项。

比如，将产物目录修改为 doc_dist：

rspress.config.ts

import { defineConfig } from '@rspress/core';

export default defineConfig({
  builderConfig: {
    output: {
      distPath: {
        root: 'doc_dist',
      },
    },
  },
});

Rspress 还提供了 builderConfig.plugins 配置项来注册 Rsbuild 插件。你可以利用 Rsbuild 丰富的插件生态来增强和扩展构建能力。

比如通过 rsbuild-plugin-google-analytics 添加 Google analytics：

rspress.config.ts

import { defineConfig } from '@rspress/core';
import { pluginGoogleAnalytics } from 'rsbuild-plugin-google-analytics';

export default defineConfig({
  builderConfig: {
    plugins: [
      pluginGoogleAnalytics({
        // replace this with your Google tag ID
        id: 'G-xxxxxxxxxx',
      }),
    ],
  },
});

Tip

你可以通过 Rsbuild - 配置文档来了解更多的配置项。

Rspack 配置

你可以通过 Rsbuild 提供的 tools.rspack 选项来修改 Rspack 的配置：

rspress.config.ts

import { defineConfig } from '@rspress/core';

export default defineConfig({
  builderConfig: {
    tools: {
      rspack(options) {
        // 修改 rspack 的配置
      },
    },
  },
});

MDX 编译插件

在 Rspress 中，MDX 的编译基于 unified 完成，你可以通过 markdown 配置来添加相关的编译插件。比如

rspress.config.ts

import { defineConfig } from '@rspress/core';

export default defineConfig({
  markdown: {
    // 需要使用 JS 版本的 MDX 编译器
    mdxRs: false,
    remarkPlugins: [
      [
        require('remark-autolink-headings'),
        {
          behavior: 'wrap',
        },
      ],
    ],
    rehypePlugins: [require('rehype-slug')],
  },
});

注意

仅 JS 版本的 MDX 编译器支持编译插件。

#构建能力扩展

#Rsbuild

#Rsbuild 配置

#Rspack 配置

#MDX 编译插件

构建能力扩展

Rsbuild

Rsbuild 配置

Rspack 配置

MDX 编译插件