总览
插件系统
你可以阅读 插件开发 来了解 Rsbuild 插件的功能，以及如何开发一个 Rsbuild 插件。
使用插件
在 Rsbuild 配置中通过 plugins 选项注册插件。
使用 Rsbuild 的 JavaScript API 时，通过 addPlugins 方法注册插件。
官方插件
以下是 Rsbuild 官方提供的插件。
React
适用于 React 框架的插件有：
- @rsbuild/plugin-react：提供对 React 的支持。
- @rsbuild/plugin-styled-components：提供对 styled-components 的编译时支持。
- @rsbuild/plugin-svgr：支持将 SVG 图片转换为一个 React 组件使用。
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-basic-ssl: 为 HTTPS server 生成不受信任的自签名证书。
- @rsbuild/plugin-check-syntax：检查构建产物的语法兼容性，判断是否存在导致兼容性问题的高级语法。
- @rsbuild/plugin-css-minimizer：用于自定义 CSS 压缩工具，切换到 cssnano 或其他工具进行 CSS 压缩。
- @rsbuild/plugin-eslint：用于在编译过程中运行 ESLint 检查。
- @rsbuild/plugin-image-compress：压缩图片资源。
- @rsbuild/plugin-less：使用 Less 作为 CSS 预处理器。
- @rsbuild/plugin-mdx：提供 MDX 支持。
- @rsbuild/plugin-node-polyfill：用于注入 Node 核心模块在浏览器端的 polyfills。
- @rsbuild/plugin-pug：提供对 Pug 模板引擎的支持。
- @rsbuild/plugin-rem：用于实现移动端页面的 rem 自适应布局。
- @rsbuild/plugin-sass：使用 Sass 作为 CSS 预处理器。
- @rsbuild/plugin-source-build：用于 monorepo 场景，支持引用其他子目录的源代码，并完成构建和热更新。
- @rsbuild/plugin-stylus：使用 Stylus 作为 CSS 预处理器。
- @rsbuild/plugin-tailwindcss：使用 Tailwind CSS v4。
- @rsbuild/plugin-toml：引用 TOML 文件，并将其转换为 JavaScript 对象。
- @rsbuild/plugin-type-check：用于在单独的进程中运行 TypeScript 类型检查。
- @rsbuild/plugin-typed-css-modules：用于为 CSS Modules 文件生成类型声明。
- @rsbuild/plugin-umd：用于构建 UMD 格式的产物。
- @rsbuild/plugin-yaml：引用 YAML 文件，并将其转换为 JavaScript 对象。
社区插件
社区插件按框架或用途分类，各分类内按包名的字母顺序排列。欢迎提交 PR，将你已发布的插件添加到列表中！
React
- @lynx-js/react-rsbuild-plugin：支持 ReactLynx，构建 Lynx bundle。
- rsbuild-plugin-react-inspector：点击浏览器中的元素时，自动跳转到本地 IDE 中的对应代码。
- rsbuild-plugin-react-router：提供与 React Router 的集成。
- rsbuild-plugin-rsc：为 Rsbuild 提供 React Server Components（RSC）支持。
- rsbuild-react-generate-pages：根据目录结构和
react-router-dom配置为 React 应用生成页面。
Vue
- @mutsuntsai/rsbuild-plugin-vue-ssg：生成 Vue 静态页面内容并注入 Rsbuild 的 HTML 产物。
- @vizejs/rspack-plugin：基于 Rust 的高性能 Vue.js 工具链。
- @vue-devtools-rstack/rsbuild：为 Rsbuild 集成 Vue DevTools，提供与
vite-plugin-vue-devtools对等的功能。 - @vue-vine/rsbuild-plugin：为 Rsbuild 提供 Vue Vine 支持。
- rsbuild-plugin-unplugin-vue：集成
unplugin-vue，用于编译 Vue 单文件组件。 - rsbuild-plugin-vue-inspector：点击浏览器中的元素时，自动跳转到本地 IDE 中的对应代码。
- rsbuild-plugin-vue-mcp：将 Vue DevTools 与 MCP 集成，向 AI 工具提供 Vue 组件树、组件状态和 Pinia store 信息。
Svelte
- rsbuild-plugin-svelte-inspector：点击浏览器中的元素时，自动跳转到本地 IDE 中的对应代码。
Angular
- @blotch/rsbuild-plugin-angular-lynx：构建 AngularLynx 应用。
- @nx/angular-rsbuild：允许你轻松直接地构建 Angular 应用程序。
Lynx
- @lynx-js/qrcode-rsbuild-plugin：在终端中生成和展示 Lynx bundle 的二维码。
- @lynx-js/rsbuild-plugin：直接使用 Rsbuild CLI 构建 Lynx 应用。
- lynxjs-app-config-plugin：向 Android / iOS 项目目录注入应用图标、权限和基本应用配置。
- ngrok-rsbuild-plugin：通过 ngrok 将 Rsbuild 开发服务器暴露到互联网，适用于 LynxJS 应用。
- relog-rsbuild-plugin：拦截设备或模拟器上运行的 LynxJS 应用的
console.log()调用，并将日志发送回 Rsbuild 开发服务器。
部署插件
- nitro：通过实验性的
nitro/rsbuild插件提供 API 路由、SSR 和部署预设，需要 Rsbuild v2.3+。 - rsbuild-plugin-aws-lambda：配置 Rsbuild，将 JavaScript 资源打包为适用于 AWS Lambda 的产物。
- rsbuild-plugin-cloudflare：开发和构建 Cloudflare Workers，并使用 workerd 在本地运行。
- zephyr-rsbuild-plugin：使用 Zephyr Cloud 部署 Rsbuild 应用。
通用插件
- @agney/rsbuild-content-collections：为 Rsbuild 集成 Content Collections。
- @devjskit/rsbuild-plugin-langs：从 JSON 文件提取内容并合并为多语言文件。
- @devup-api/rsbuild-plugin：从 OpenAPI schema 生成 TypeScript 类型。
- @golar-rstack/rsbuild：在独立进程中运行 golar 类型检查和类型感知的代码检查。
- @module-federation/rsbuild-plugin：为 Rsbuild 集成 Module Federation v2。
- @mpaynesecurity/rsbuild-plugin-fusion：在 Rsbuild 支持的 UI 框架中直接运行服务端代码。
- @mpaynesecurity/rsbuild-plugin-hydra：将 Rsbuild 应用扩展为轻量级全栈框架。
- @octanejs/rsbuild-plugin：为 Octane 提供基于 Rsbuild 的路由、SSR、hydration 和生产构建支持。
- @plugin-cra-proxy/rsbuild：模拟 Create React App 代理行为的 Rsbuild 开发代理插件。
- @seed-design/rsbuild-plugin：为 Rsbuild 集成 Seed 设计系统。
- @webx-kit/rsbuild-plugin：为 Rsbuild 提供浏览器扩展开发支持。
- @zealakit/css-doctor-rsbuild：根据页面覆盖范围和体积预算拆分 CSS。
- plugin-sails-content：为 Rsbuild 集成 Sails Content。
- rsbuild-auto-i18n-plugin：自动翻译插件，支持多种翻译服务和自定义翻译器。
- rsbuild-plugin-arco：为 Rsbuild 集成 Arco Design。
- rsbuild-plugin-arethetypeswrong：使用
arethetypeswrong检查 TypeScript 类型定义。 - rsbuild-plugin-auto-alias：根据路径自动生成别名。
- rsbuild-plugin-biome：在 Rsbuild 构建过程中集成 Biome。
- rsbuild-plugin-block-imports：在 Module Federation 构建中检测并阻止不允许的导入。
- rsbuild-plugin-cdn-import：通过 CDN 导入模块。
- rsbuild-plugin-compression：使用 gzip、brotli 或 zstd 压缩资源。
- rsbuild-plugin-css-optimizer：自定义 CSS 压缩，支持选择 cssnano 或 Lightning CSS。
- rsbuild-plugin-devtools-json：在开发服务器中动态生成
com.chrome.devtools.json。 - rsbuild-plugin-dts：生成 TypeScript 类型声明文件。
- rsbuild-plugin-ejs：提供 EJS 模板引擎支持。
- rsbuild-plugin-generate-file：在打包后生成静态文件并写入产物目录。
- rsbuild-plugin-glsl：导入内联 GLSL 着色器并支持压缩。
- rsbuild-plugin-google-analytics：为网站集成 Google Analytics。
- rsbuild-plugin-html-minifier-terser：使用
html-minifier-terser压缩 HTML 产物。 - rsbuild-plugin-i18next-extractor：使用 i18next-cli 提取国际化翻译内容。
- rsbuild-plugin-iconify：自动生成包含内嵌 Iconify SVG 图标的优化 CSS。
- rsbuild-plugin-mcp：为 Rsbuild 应用启用 MCP 服务器，提供项目配置和模块图信息。
- rsbuild-plugin-monaco-editor-nls：为 Monaco Editor 提供本地化支持。
- rsbuild-plugin-open-graph：生成 Open Graph 元标签。
- rsbuild-plugin-oxlint：在 Rsbuild 构建过程中集成 Oxlint。
- rsbuild-plugin-print：打印文本，并通过二维码展示访问地址。
- rsbuild-plugin-protobufjs：为 Rsbuild 集成
protobufjs。 - rsbuild-plugin-publint：在构建后运行
publint检查 npm 包。 - rsbuild-plugin-pwa：为 Rsbuild 提供零配置的 PWA 支持。
- rsbuild-plugin-rempa：收集页面并生成多页面应用（MPA）。
- rsbuild-plugin-rslint：在 Rsbuild 构建过程中集成 Rslint。
- rsbuild-plugin-ssg：在构建时预渲染页面，默认不包含 JavaScript，并支持孤岛架构。
- rsbuild-plugin-start-server：在每次 Rsbuild 构建完成后自动启动或重启 Node.js 服务，适用于后端、API 和 SSR 项目。
- rsbuild-plugin-stylelint：在编译过程中运行 Stylelint 检查。
- rsbuild-plugin-tailwindcss：为 Rsbuild 集成 Tailwind CSS。
- rsbuild-plugin-virtual-module：使用 loader API 创建虚拟模块。
- rsbuild-plugin-wasmpack：使用 wasm-pack 将 Rust crate 编译为 WebAssembly。
- rsbuild-plugin-web-ext：开发和构建浏览器扩展。
- rsbuild-plugin-web-extension：为 Rsbuild 提供 Chrome 和其他浏览器扩展支持。
- rsbuild-plugin-workspace-dev：按拓扑顺序启动 monorepo 子项目。
你也可以在 npm 上搜索 rsbuild-plugin 关键词来发现更多 Rsbuild 插件。