#生态

#Rstack

Rspack 是 Rstack 的一员。Rstack 是为开发者与 Agent 打造的高性能、一体化 JavaScript 工具链。

#Rsbuild

构建工具

Rsbuild 是由 Rspack 驱动的高性能构建工具，它默认包含了一套精心设计的构建配置，提供开箱即用的开发体验，并能够充分发挥出 Rspack 的性能优势。

#Rslib

库开发工具

Rslib 是一个基于 Rsbuild 的 npm 库开发工具，它复用了 Rsbuild 精心设计的构建配置和插件系统，使开发者能够以简单直观的方式创建 JavaScript 库。

#Rspress

静态站点生成器 React

Rspress 是一个基于 Rsbuild、React 和 MDX 的静态站点生成器，内置了一套默认的文档主题，你可以通过 Rspress 来快速搭建一个文档站点，同时也可以自定义主题，来满足个性化静态站需求，比如博客站、产品主页等。

#Rsdoctor

构建分析工具

Rsdoctor 是一个针对 Rspack 的构建分析工具，可以直观地展示构建过程，例如编译时间、编译前后的代码变化、模块引用关系、重复模块等。如果你需要排查构建产物或构建时编译问题，可以使用 Rsdoctor。

#Rstest

测试框架

Rstest 是一个基于 Rspack 的测试框架，它为 Rspack 生态提供了全面、一流的支持，能够轻松集成到现有的 Rspack 项目中。

#Rslint

代码检查工具

Rslint 是一个基于 typescript-go 的高性能 JavaScript 和 TypeScript 代码检查工具。它与 ESLint 及 TypeScript-ESLint 生态系统高度兼容，可实现无缝替换，并提供极快的代码检查速度。

#Rstack CLI

统一命令行工具

Rstack CLI 通过统一的命令行界面和配置整合 Rstack 工具链，为应用、库和文档构建，以及测试、代码检查和格式化提供一致的工作流程。

#社区集成

#Angular Rspack

构建工具 Angular

Angular Rspack 是一套工具链和插件集合，能够让你简单直接地使用 Rspack 和 Rsbuild 构建 Angular 应用。

#Docusaurus

静态站点生成器 React

Docusaurus 是一个用于快速构建、部署和维护开源项目网站的静态站点生成器。

Docusaurus 从 v3.6 开始支持使用 Rspack 作为打包工具，详见 Docusaurus Faster。

#Extension.js

构建工具 浏览器扩展

Extension.js 是一个用单一代码库为 Chrome、Edge、Firefox 和 Safari 构建浏览器扩展的框架。

Extension.js 使用 Rspack 打包，并把 manifest.json 中声明的入口解析为 Rspack 的入口图。

#Modern.js

Web 框架 React

Modern.js 是一个基于 Rsbuild 实现的渐进式 React 框架，支持嵌套路由、服务器端渲染（SSR）和模块联邦，并提供开箱即用的 CSS 解决方案。

#Meteor

Web 框架

Meteor 是一个全栈 JavaScript 平台，用于开发现代 Web 和移动应用。

Meteor 3.4 提供了基于 Rspack 的集成，带来更快的构建速度和更小的打包体积。

#NestJS

Node.js 框架

NestJS 是一个 TypeScript 框架，用于构建运行在 Node.js 上的可扩展服务端应用。

从 NestJS 12 开始，Nest CLI 使用 Rspack 作为 monorepo 的默认打包器。详见 NestJS 12 发布公告。

#Next.js

Web 框架 React

Next.js 是一个用于构建全栈 Web 应用的 React 框架。它允许你使用 React 组件构建用户界面，并使用 Next.js 进行额外功能和优化。

Rspack 团队与 Next.js 团队合作提供了 next-rspack 插件。该插件允许你使用 Rspack 作为 Next.js 的打包工具，详见 Next.js 指南。

#Nitro

服务端框架

Nitro 是一个服务端框架，用于构建可部署到 Node.js、Bun、Deno、Serverless 平台和边缘运行时的应用。

Nitro 支持通过 builder: 'rspack' 使用 Rspack 打包服务端代码。它还提供了 Rsbuild 插件，为 Rsbuild 应用添加 API 路由、SSR 和 WebSockets 支持。

#Nuxt

Web 框架 Vue

Nuxt 是一个开源框架，提供了直观且可扩展的方式来使用 Vue.js 创建类型安全、高性能和生产级的全栈 Web 应用程序和网站。

Nuxt v3.14 引入了对 Rspack 的官方支持，详见 Nuxt 3.14。

#Nx

构建系统 Monorepo

Nx 是一个强大的开源构建系统，提供了工具来提升生产力、优化 CI 性能和维护代码质量。

Rspack 团队与 Nx 团队合作提供了 Rspack Nx 插件。该插件包含在 Nx Workspace 中管理 Rspack 项目的执行器、生成器和实用工具。

#Rspeedy

构建工具 Lynx

Rspeedy 是一个基于 Rspack 的构建工具，专门为 Lynx 应用设计。Lynx 是一套帮助 Web 开发者复用现有经验、通过一份代码同时构建移动端原生界面与 Web 端界面的技术方案。

#Re.Pack

构建工具 React Native

Re.Pack 是一个用于开发 React Native 应用的构建工具。

Re.Pack v5 使用 Rspack 和 React Native 社区 CLI 的插件系统，允许你使用 Rspack 打包你的应用，并轻松切换到 Metro。

#Remotion

视频框架 React

Remotion 是一个基于 React 的视频创作框架，可以用代码以编程方式生成视频。

@remotion/bundler 可以使用 Rspack 打包 Remotion 项目。

#Shakapacker

构建工具 Rails

Shakapacker 用于编译 Rails 前端资源。参见 Rspack 集成文档。

#Storybook

UI 开发

Storybook Rsbuild 允许你使用 Rsbuild 作为 Storybook 的构建工具，并提供了 React 和 Vue 等 UI 框架的集成。

#TanStack Router

路由 React

TanStack Router 是一个用于构建 React 应用的类型安全路由库，提供嵌套路由、路由级数据加载和 search params API 等能力。

TanStack Router 可以通过 Rspack 插件 与 Rspack 集成。

#TanStack Start

Web 框架 React Solid

TanStack Start 是一个由 TanStack Router 驱动的 React 和 Solid 全栈框架。

TanStack Start 提供了对 Rsbuild 的官方支持，允许你使用 Rsbuild 来构建全栈 Web 应用，详见 TanStack Start Adds First-Class Rsbuild Support。

#社区 Plugins

以下社区插件可用于 Rspack，使用方法请参考插件指南。

插件按包名字母顺序排列。欢迎提交 PR，将你已发布的插件添加到列表中。

• @aaroon/workbox-rspack-plugin：集成 Workbox，生成 service worker 和预缓存清单。
• @datadog/rspack-plugin：在构建流程中集成 Datadog。
• @douyinfe/semi-rspack-plugin：定制 Semi Design 主题和 CSS 类名前缀。
• @fluentui/react-icons-font-subsetting-webpack-plugin：裁剪 Fluent UI 图标字体，仅保留应用使用的字形。
• @golar-rstack/rspack：在独立进程中运行 golar 类型检查和类型感知的 lint 检查。
• @heyq02/rspack-plugin-git-revision：从 Git 生成版本、提交哈希、分支和提交时间等元数据。
• @kirana-style/webpack：将 Kirana 样式编译为原子 CSS。
• @lunora/rspack：集成面向 Cloudflare Workers 的 Lunora 后端框架，目前通过 @lunora/rspack@alpha 提供预览版本。
• @module-federation/enhanced：提供增强的模块联邦功能。
• @octanejs/rspack-plugin：编译 Octane TSRX 源文件。
• @rsdoctor/rspack-plugin：使用 Rsdoctor 分析构建流程和产物。
• @rspack/plugin-preact-refresh：启用 Preact Refresh。
• @rspack/plugin-react-refresh：启用 React Fast Refresh。
• @scalprum/remote-types：在构建时获取远端模块联邦类型。
• @sentry/webpack-plugin：提供 Sentry 的 source map 上传和版本管理功能。
• @serwist/webpack-plugin：使用 Serwist 生成 service worker 和预缓存清单。
• @statoscope/webpack-plugin：生成交互式报告，分析构建统计数据。
• @stillwind/integration：集成 Stillwind 的按需 CSS 生成。
• @stylexswc/rspack-plugin：使用 SWC 编译 StyleX 并提取 CSS。
• @unocss/webpack：集成 UnoCSS。
• @vanilla-extract/webpack-plugin：将 vanilla-extract 样式提取为 CSS 文件。
• @vizejs/rspack-plugin：使用 Vize 编译 Vue 单文件组件。
• @vue-devtools-rstack/rspack：在 Rspack 应用中集成 Vue DevTools。
• add-charset-webpack-plugin：为生成的 CSS 文件添加 charset 声明。
• beasties-webpack-plugin：内联关键 CSS，并延迟加载其余样式。
• bundle-stats-webpack-plugin：分析构建产物的体积、资源、模块和依赖包，并比较不同构建。
• carbon-preprocess-svelte：优化 Carbon Svelte 组件并移除未使用的 CSS。
• case-sensitive-paths-webpack-plugin：检查导入文件路径的大小写。
• clean-webpack-plugin：清理构建输出目录中的文件。
• code-inspector-plugin：点击页面元素，在编辑器中打开对应的源代码。
• compression-rspack-plugin：使用 Rust 实现并行压缩资源。
• compression-webpack-plugin：生成资源的压缩版本。
• csp-rspack-plugin：为 HTML 文件生成 Content Security Policy 指令。
• css-minimizer-webpack-plugin：使用 cssnano 压缩 CSS。
• dotenv-webpack：从 .env 文件加载环境变量。
• eslint-rspack-plugin：在编译过程中运行 ESLint 检查。
• html-rspack-plugin：为 Rspack 构建产物生成 HTML 文件。
• ide-byebye：将页面元素的源码位置和你的修改要求发送给 AI 编程代理。
• inject-manifest-plugin：将 Workbox 预缓存清单注入 service worker。
• node-polyfill-webpack-plugin：为 Node.js 核心模块提供 polyfill。
• oxc-webpack-plugin：使用 Oxc 压缩 JavaScript 资源。
• prosebook：编译翻译资源并移除未使用的消息。
• purgecss-webpack-plugin：移除构建产物中未使用的 CSS。
• react-cosmos-plugin-rspack：使用 Rspack 构建和运行 React Cosmos。
• rspack-manifest-plugin：生成资源清单。
• rspack-plugin-cli-copy：将开发服务器的网络 URL 复制到剪贴板。
• rspack-plugin-mock：为开发服务器添加 API mock 功能。
• rspack-plugin-retry-chunk-load：在请求失败后重试加载 chunk。
• rspack-plugin-solid-svg：将 SVG 文件转换为 Solid 组件。
• rspack-plugin-svg-sprite：将 SVG 文件合并为 SVG sprite。
• rspack-plugin-virtual-module：创建虚拟模块。
• rspack-s3-plugin：将构建产物上传到 Amazon S3。
• rspack-unocss-plugin：通过虚拟 CSS 模块和原生 CSS 处理能力集成 UnoCSS。
• rtlcss-rspack-plugin：生成适用于从右到左布局的 CSS。
• sonda：可视化并分析 JavaScript 和 CSS 构建产物。
• ts-checker-rspack-plugin：在独立进程中运行 TypeScript 类型检查。
• typia-rspack-plugin：集成 Typia，生成运行时类型校验代码。
• weapp-tailwindcss：为小程序适配 Tailwind CSS。
• webpack-bundle-analyzer：通过交互式矩形树图展示构建产物的体积。
• webpackbar：展示构建进度和性能分析信息。
• zephyr-rspack-plugin：将应用部署到 Zephyr Cloud。

#社区 Loaders

以下社区 loader 可用于 Rspack，使用方法请参考 Loader 指南。

Loader 按包名字母顺序排列。欢迎提交 PR，将你已发布的 loader 添加到列表中。

• @alienfast/i18next-loader：汇总 i18next 翻译资源。
• @discord/rspack-intl-loader：编译 Discord 国际化消息并生成翻译分包。
• @graphql-tools/webpack-loader：将 GraphQL 文档编译为 AST。
• @jsdevtools/coverage-istanbul-loader：使用 Istanbul 为 JavaScript 添加代码覆盖率插桩。
• @lingui/loader：编译 Lingui 翻译目录。
• @locator/webpack-loader：为 React 组件添加 LocatorJS 定位信息。
• @mdx-js/loader：将 MDX 编译为 JavaScript 组件。
• @sucrase/webpack-loader：使用 Sucrase 转译 TypeScript、JSX 和 JavaScript。
• @svgr/webpack：将 SVG 文件转换为 React 组件。
• @tailwindcss/webpack：编译 Tailwind CSS v4 样式。
• @teamsupercell/typings-for-css-modules-loader：生成 CSS Modules TypeScript 声明。
• @vercel/webpack-asset-relocator-loader：搬运 Node.js 构建引用的资源并重写路径。
• @vue-vine/rspack-loader：编译 Vue Vine 组件。
• @webdiscus/pug-loader：编译 Pug 模板并注入数据。
• @wyw-in-js/webpack-loader：静态提取 CSS-in-JS 样式。
• arraybuffer-loader：将二进制资源导出为 ArrayBuffer。
• babel-loader：使用 Babel 转译 JavaScript。
• coffee-loader：将 CoffeeScript 编译为 JavaScript。
• css-loader：解析 CSS 导入和资源 URL，并将 CSS 导出为 JavaScript 模块。
• css-modules-typescript-loader：生成 CSS Modules TypeScript 声明。
• csv-loader：将 CSV 文件解析为 JavaScript 数据。
• ejs-compiled-loader：预编译 EJS 模板。
• esbuild-loader：使用 esbuild 转译 JavaScript、TypeScript 和 JSX。
• frontmatter-markdown-loader：提取 Markdown front matter 并转换正文。
• glob-import-loader：展开 glob 导入。
• glslify-loader：预处理 GLSL 模块和依赖。
• graphql-tag/loader：将 GraphQL 查询及 fragment 编译为 AST。
• handlebars-loader：预编译 Handlebars 模板。
• html-loader：将 HTML 导出为字符串，并解析其中引用的资源。
• ifdef-loader：根据编译常量裁剪条件代码。
• import-glob-loader：展开 JavaScript、CSS 和 Sass 导入中的 glob 模式。
• imports-loader：为依赖特定全局变量的模块注入导入语句。
• isomorphic-style-loader：支持 SSR 的样式收集和注入。
• less-loader：将 Less 编译为 CSS。
• magic-comments-loader：为动态导入添加 magic comments。
• markdown-loader：将 Markdown 转换为 HTML。
• nearley-loader：将 Nearley 语法编译为解析器配置。
• node-loader：加载扩展名为 .node 的 Node.js 原生模块。
• oxc-webpack-loader：使用 Oxc 转换 JavaScript 和 TypeScript。
• postcss-loader：使用 PostCSS 插件处理 CSS。
• pug-plain-loader：将 Pug 模板编译为 HTML。
• rails-erb-loader：构建时使用 Ruby 处理 ERB 模板。
• react-compiler-webpack：在构建中集成 React Compiler。
• react-svg-loader：将 SVG 转成 React 组件。
• resolve-url-loader：根据 source map 修正 Sass 中的相对资源路径。
• responsive-loader：生成多尺寸图片和 srcSet 元数据。
• restrict-imports-loader：校验并限制不允许的 import。
• rspack-vue-loader：编译 Vue 3 单文件组件。
• sass-loader：将 Sass 和 SCSS 编译为 CSS。
• sass-resources-loader：自动注入共享 Sass 资源。
• shader-loader：加载 GLSL 并组合 shader chunk。
• source-map-loader：从 JavaScript 文件中提取已有的 source map。
• string-replace-loader：构建时替换源码字符串。
• style-loader：将 CSS 注入 DOM。
• style-resources-loader：自动注入共享样式变量和 mixin。
• stylus-loader：将 Stylus 编译为 CSS。
• svelte-loader：编译 Svelte 组件。
• svg-react-loader：将 SVG 文件转换为 React 组件。
• svg-url-loader：将 SVG 优化并编码为 data URL。
• svgo-loader：使用 SVGO 优化 SVG 文件。
• to-string-loader：将其他 loader 的导出转换成字符串。
• underscore-template-loader：预编译 Underscore 模板。
• vue-docgen-loader：向 Vue 组件注入文档元数据。
• vue-svg-inline-loader：将 Vue 模板中的 SVG 图片替换为内联 SVG。
• webfonts-loader：将 SVG 图标生成字体及配套 CSS。
• webpack-graphql-loader：加载 GraphQL 查询，支持校验与 fragment。
• webpack-import-glob-loader：展开 glob 导入并汇总模块。
• wext-manifest-loader：生成针对不同浏览器的扩展 manifest。
• worker-rspack-loader：将脚本打包为 Web Worker。
• yaml-loader：将 YAML 文件导入为 JavaScript 对象。

#更多

访问 awesome-rstack 来发现更多 Rspack 生态中的项目。