plugins plugins#

plugins 选项用于注册 Rsbuild 插件。

Rslib 与 Rsbuild 共享同一套插件系统，因此你可以在 Rslib 中使用 Rsbuild 插件。

使用插件#

你可以在 rslib.config.* 中通过 plugins 选项来注册 Rsbuild 插件，详见 Rsbuild - plugins。

import { defineConfig } from '@rslib/core';
import { pluginReact } from '@rsbuild/plugin-react';

export default defineConfig({
  plugins: [pluginReact()],
});

官方插件#

下面是 Rsbuild 官方提供的插件，适用于 Rsbuild 和 Rslib。

React#

适用于 React 的插件有：

• React 插件：提供对 React 的支持。
• SVGR 插件：支持将 SVG 图片转换为一个 React 组件使用。
• Styled Components 插件：提供对 styled-components 的编译时支持。

Vue#

适用于 Vue 的插件有：

• Vue 插件：提供对 Vue 3 SFC（单文件组件）的支持。
• Vue JSX 插件：提供对 Vue 3 JSX / TSX 语法的支持。
• Vue 2 插件：提供对 Vue 2 SFC（单文件组件）的支持。
• Vue 2 JSX 插件：提供对 Vue 2 JSX / TSX 语法的支持。

Preact#

适用于 Preact 的插件有：

• Preact 插件：提供对 Preact 的支持。

Svelte#

适用于 Svelte 的插件有：

• Svelte 插件：提供对 Svelte 组件（.svelte 文件）的支持。

Solid#

适用于 Solid 的插件有：

• Solid 插件：提供对 Solid 的支持。

Common#

以下是与框架无关的通用插件：

• Babel 插件：提供对 Babel 转译能力的支持。
• Sass 插件：使用 Sass 作为 CSS 预处理器。
• Less 插件：使用 Less 作为 CSS 预处理器。
• Stylus 插件：使用 Stylus 作为 CSS 预处理器。
• ESLint 插件：用于在编译过程中运行 ESLint 检查。
• publint 插件：在构建后运行 publint 来检查 npm 包。
• Type Check 插件：用于在单独的进程中运行 TypeScript 类型检查。
• Image Compress 插件：压缩图片资源。
• MDX 插件：提供 MDX 支持。
• Node Polyfill 插件：用于注入 Node 核心模块在浏览器端的 polyfills。
• Source Build 插件：用于 monorepo 场景，支持引用其他子目录的源代码，并完成构建和热更新。
• Check Syntax 插件：检查构建产物的语法兼容性，判断是否存在导致兼容性问题的高级语法。
• CSS Minimizer 插件：用于自定义 CSS 压缩工具，切换到 cssnano 或其他工具进行 CSS 压缩。
• Typed CSS Modules 插件：用于为 CSS Modules 文件生成类型声明。
• Pug 插件：提供对 Pug 模板引擎的支持。
• Rem 插件：用于实现移动端页面的 rem 自适应布局。
• UMD 插件：用于构建 UMD 格式的产物。
• YAML 插件：引用 YAML 文件，并将其转换为 JavaScript 对象。
• TOML 插件：引用 TOML 文件，并将其转换为 JavaScript 对象。

社区插件#

你可以在 awesome-rspack - Rsbuild Plugins 中查看社区提供的 Rsbuild 插件。

也可以在 npm 上搜索 rsbuild-plugin 关键词来发现更多 Rsbuild 插件。