> For AI agents: the complete documentation index is available at /zh/llms.txt, the full documentation bundle is available at /zh/llms-full.txt.

# plugins [![plugins](https://assets.rspack.rs/rsbuild/rsbuild-logo.svg)plugins](https://rsbuild.rs/zh/config/plugins)
`plugins` 选项用于注册 Rsbuild 插件。

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

## 使用插件

你可以在 `rslib.config.*` 中通过 `plugins` 选项来注册 Rsbuild 插件，详见 [Rsbuild - plugins](https://rsbuild.rs/zh/config/plugins)。

```ts title="rslib.config.ts"
import { defineConfig } from '@rslib/core';
import { pluginReact } from '@rsbuild/plugin-react';

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

## 官方插件

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

### React

适用于 React 的插件有：

- [React 插件](https://rsbuild.rs/zh/plugins/list/plugin-react)：提供对 React 的支持。
- [SVGR 插件](https://rsbuild.rs/zh/plugins/list/plugin-svgr)：支持将 SVG 图片转换为一个 React 组件使用。
- [Styled Components 插件](https://github.com/rstackjs/rsbuild-plugin-styled-components)：提供对 styled-components 的编译时支持。

### Vue

适用于 Vue 的插件有：

- [Vue 插件](https://rsbuild.rs/zh/plugins/list/plugin-vue)：为 Vue 3 SFC（单文件组件）提供支持的插件。
- [Vue JSX 插件](https://github.com/rstackjs/rsbuild-plugin-vue-jsx)：提供对 Vue 3 JSX / TSX 语法的支持。
- [Vue 2 插件](https://github.com/rstackjs/rsbuild-plugin-vue2)：提供对 Vue 2 SFC（单文件组件）的支持。
- [Vue 2 JSX 插件](https://github.com/rstackjs/rsbuild-plugin-vue2-jsx)：提供对 Vue 2 JSX / TSX 语法的支持。

### Preact

适用于 Preact 的插件有：

- [Preact 插件](https://rsbuild.rs/zh/plugins/list/plugin-preact)：提供对 Preact 的支持。

### Svelte

适用于 Svelte 的插件有：

- [Svelte 插件](https://rsbuild.rs/zh/plugins/list/plugin-svelte)：提供对 Svelte 组件（`.svelte` 文件）的支持。

### Solid

适用于 Solid 的插件有：

- [Solid 插件](https://rsbuild.rs/zh/plugins/list/plugin-solid)：提供对 Solid 的支持。

### Common

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

- [Babel 插件](https://rsbuild.rs/zh/plugins/list/plugin-babel)：提供对 Babel 转译能力的支持。
- [Sass 插件](https://rsbuild.rs/zh/plugins/list/plugin-sass)：使用 Sass 作为 CSS 预处理器。
- [Less 插件](https://rsbuild.rs/zh/plugins/list/plugin-less)：使用 Less 作为 CSS 预处理器。
- [Stylus 插件](https://github.com/rstackjs/rsbuild-plugin-stylus)：使用 Stylus 作为 CSS 预处理器。
- [Tailwind CSS 插件](https://rsbuild.rs/zh/plugins/list/plugin-tailwindcss)：使用 Tailwind CSS v4。
- [ESLint 插件](https://github.com/rstackjs/rsbuild-plugin-eslint)：用于在编译过程中运行 ESLint 检查。
- [publint 插件](https://github.com/rstackjs/rsbuild-plugin-publint)：在构建后运行 [`publint`](https://github.com/bluwy/publint) 来检查 npm 包。
- [Are The Types Wrong 插件](https://github.com/rstackjs/rsbuild-plugin-arethetypeswrong)：在构建后运行 [`arethetypeswrong`](https://github.com/arethetypeswrong/arethetypeswrong.github.io) 来检查 npm 包的 TypeScript 类型定义。
- [Type Check 插件](https://github.com/rstackjs/rsbuild-plugin-type-check)：用于在单独的进程中运行 TypeScript 类型检查。
- [Image Compress 插件](https://github.com/rstackjs/rsbuild-plugin-image-compress)：压缩图片资源。
- [MDX 插件](https://github.com/rstackjs/rsbuild-plugin-mdx)：提供 MDX 支持。
- [Node Polyfill 插件](https://github.com/rstackjs/rsbuild-plugin-node-polyfill)：用于注入 Node 核心模块在浏览器端的 polyfills。
- [Source Build 插件](https://github.com/rstackjs/rsbuild-plugin-source-build)：用于 monorepo 场景，支持引用其他子目录的源代码，并完成构建和热更新。
- [Check Syntax 插件](https://github.com/rstackjs/rsbuild-plugin-check-syntax)：检查构建产物的语法兼容性，判断是否存在导致兼容性问题的高级语法。
- [CSS Minimizer 插件](https://github.com/rstackjs/rsbuild-plugin-css-minimizer)：用于自定义 CSS 压缩工具，切换到 [cssnano](https://github.com/cssnano/cssnano) 或其他工具进行 CSS 压缩。
- [Typed CSS Modules 插件](https://github.com/rstackjs/rsbuild-plugin-typed-css-modules)：用于为 CSS Modules 文件生成类型声明。
- [Pug 插件](https://github.com/rstackjs/rsbuild-plugin-pug)：提供对 Pug 模板引擎的支持。
- [Rem 插件](https://github.com/rstackjs/rsbuild-plugin-rem)：用于实现移动端页面的 rem 自适应布局。
- [UMD 插件](https://github.com/rstackjs/rsbuild-plugin-umd)：用于构建 UMD 格式的产物。
- [YAML 插件](https://github.com/rstackjs/rsbuild-plugin-yaml)：引用 YAML 文件，并将其转换为 JavaScript 对象。
- [TOML 插件](https://github.com/rstackjs/rsbuild-plugin-toml)：引用 TOML 文件，并将其转换为 JavaScript 对象。

:::tip
你可以在 [web-infra-dev/rsbuild](https://github.com/web-infra-dev/rsbuild) 和 [rstackjs](https://github.com/rstackjs) 中找到这些插件的源代码。
:::

## 社区插件

你可以在 [awesome-rstack - Rsbuild Plugins](https://github.com/rstackjs/awesome-rstack?tab=readme-ov-file#rsbuild-plugins) 中查看社区提供的 Rsbuild 插件。

也可以在 npm 上搜索 [rsbuild-plugin](https://www.npmjs.com/search?q=rsbuild-plugin\&ranking=popularity) 关键词来发现更多 Rsbuild 插件。