close
Rspress
  • 中文

      • 构建能力扩展

      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: {
    remarkPlugins: [
      [
        require('remark-autolink-headings'),
        {
          behavior: 'wrap',
        },
      ],
    ],
    rehypePlugins: [require('rehype-slug')],
  },
});