#总览

#插件系统

你可以阅读 插件系统 来了解 Rsbuild 插件的功能，以及如何开发一个 Rsbuild 插件。

#使用插件

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

如果你使用了 Rsbuild 的 JavaScript API，可以通过 addPlugins 方法来注册插件。

#官方插件

以下是 Rsbuild 官方提供的插件。

#React

适用于 React 框架的插件有：

• @rsbuild/plugin-react：提供对 React 的支持。
• @rsbuild/plugin-svgr：支持将 SVG 图片转换为一个 React 组件使用。
• @rsbuild/plugin-styled-components：提供对 styled-components 的编译时支持。

#Vue

适用于 Vue 框架的插件有：

• @rsbuild/plugin-vue：提供对 Vue 3 SFC（单文件组件）的支持。
• @rsbuild/plugin-vue-jsx：提供对 Vue 3 JSX / TSX 语法的支持。
• @rsbuild/plugin-vue2：提供对 Vue 2 SFC（单文件组件）的支持。
• @rsbuild/plugin-vue2-jsx：提供对 Vue 2 JSX / TSX 语法的支持。

#Preact

适用于 Preact 框架的插件有：

• @rsbuild/plugin-preact：提供对 Preact 的支持。

#Svelte

适用于 Svelte 框架的插件有：

• @rsbuild/plugin-svelte：提供对 Svelte 组件（.svelte 文件）的支持。

#Solid

适用于 Solid 框架的插件有：

• @rsbuild/plugin-solid：提供对 Solid 的支持。

#通用插件

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

• @rsbuild/plugin-assets-retry：用于在静态资源加载失败时自动发起重试请求。
• @rsbuild/plugin-babel：提供对 Babel 转译能力的支持。
• @rsbuild/plugin-sass：使用 Sass 作为 CSS 预处理器。
• @rsbuild/plugin-less：使用 Less 作为 CSS 预处理器。
• @rsbuild/plugin-stylus：使用 Stylus 作为 CSS 预处理器。
• @rsbuild/plugin-basic-ssl: 为 HTTPS server 生成不受信任的自签名证书。
• @rsbuild/plugin-eslint：用于在编译过程中运行 ESLint 检查。
• @rsbuild/plugin-type-check：用于在单独的进程中运行 TypeScript 类型检查。
• @rsbuild/plugin-image-compress：压缩图片资源。
• @rsbuild/plugin-mdx：提供 MDX 支持。
• @rsbuild/plugin-node-polyfill：用于注入 Node 核心模块在浏览器端的 polyfills。
• @rsbuild/plugin-source-build：用于 monorepo 场景，支持引用其他子目录的源代码，并完成构建和热更新。
• @rsbuild/plugin-check-syntax：检查构建产物的语法兼容性，判断是否存在导致兼容性问题的高级语法。
• @rsbuild/plugin-css-minimizer：用于自定义 CSS 压缩工具，切换到 cssnano 或其他工具进行 CSS 压缩。
• @rsbuild/plugin-typed-css-modules：用于为 CSS Modules 文件生成类型声明。
• @rsbuild/plugin-pug：提供对 Pug 模板引擎的支持。
• @rsbuild/plugin-rem：用于实现移动端页面的 rem 自适应布局。
• @rsbuild/plugin-umd：用于构建 UMD 格式的产物。
• @rsbuild/plugin-yaml：引用 YAML 文件，并将其转换为 JavaScript 对象。
• @rsbuild/plugin-toml：引用 TOML 文件，并将其转换为 JavaScript 对象。

#社区插件

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

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

#React

• rsbuild-plugin-react-router：提供与 React Router 的集成。

#Angular

• @ng-rsbuild/plugin-angular：允许你轻松直接地构建 Angular 应用程序。