快速上手

通过本章节来了解如何快速上手并使用 Rspack。

使用脚手架快速创建

使用 Rsbuild

我们推荐使用 Rsbuild 创建新项目,调用如下命令即可:

npm
yarn
pnpm
bun
npm create rsbuild@latest

然后按照提示操作即可。

使用 Rspack CLI

你可以直接使用 Rspack CLI 来创建一个基础项目,调用以下命令即可:

npm
yarn
pnpm
bun
npm create rspack@latest

然后按照提示操作即可。

社区工具链

社区中已经有一些基于 Rspack 的工具链:

  • 如果你需要构建一个 Web 应用,推荐使用 Rsbuild
  • 如果你需要开发一个静态站点(如文档站),你可以尝试 Rspress.
  • 如果你需要一个 React 全栈框架来构建 Web 应用,你可以尝试 Modern.js Framework
  • 如果你需要在 Monorepo 项目中使用 Rspack,并使用快速、可扩展的构建系统,你可以尝试 Nx

Rsbuild

Rsbuild 是一个基于 Rspack 的 web 构建工具,它的目标是为 Rspack 用户提供开箱即用的构建能力,使开发者能够在零配置的情况下启动一个 web 项目。

Rsbuild 集成了社区中基于 Rust 的高性能工具,包括 Rspack 和 SWC,以提供一流的构建速度和开发体验。

你可以访问 官网 了解更多关于 Rsbuild 的信息。

如果你需要将一个 CRA(Create React App)应用迁移到 Rspack,可以按照 CRA 迁移指南,使用 Rsbuild 来进行快速迁移。

Rspress

Rspress 是一个基于 Rspack 的静态站点生成器,它包含如下的特性:

  • 🚀 快速构建:基于 Rust 构建工具和 Markdown/MDX 编译器,构建速度极快,为你带来更舒适的开发体验。
  • 📚 MDX 支持:MDX 是一种强大的内容编写方式,允许你在 Markdown 中使用 React 组件。
  • 📦 内置全文搜索:在构建过程中自动生成全文搜索索引,提供开箱即用的全文搜索能力。
  • 🌈 静态站点生成:在生产环境中,它会自动构建成静态 HTML 文件,可以轻松部署到任何地方。
  • 🔌 提供插件系统:提供一个插件系统,你可以根据自己的需要定制构建过程和自定义主题。

你可以访问 官网 了解更多关于 Rspress 的信息。

Modern.js

Modern.js 是字节跳动 Web 工程体系的开源版本,它提供了一个基于 Rspack 实现的渐进式 React 框架,并为开发 Web 应用提供了完整的解决方案。框架支持嵌套路由、服务器端渲染(SSR),并提供开箱即用的 CSS 解决方案,比如 styled-components 和 Tailwind CSS。

请阅读 官方文档 来了解更多关于 Modern.js 的信息。

使用 Nx

Nx 是一个快速、可扩展的构建系统,Rspack 团队与 Nx 团队合作提供了 Rspack Nx 插件。该插件会给你一个预设项目,将 Rspack 与 React、TypeScript、ESLint、Jest 和用于 e2e 测试的 Cypress 整合在一起,使你能迅速搭建一个用于生产环境的应用。

运行以下命令,用 React 和 Rspack 建立一个新的 Nx workspace。

npm
yarn
pnpm
npx create-nx-workspace myrspackapp --preset=@nx/rspack

这个预设项目已经包含了 Rspack、TypeScript、TSX 和 React。此外,它还配备了用于测试的 Jest 和 Cypress 、用于代码规范校验的 ESLint。

创建成功后,你可以直接用 npm start 来启动开发服务器。你也可以运行 npm run build 来为生产环境构建应用程序、运行 npm run test 来运行单元测试。

你可以在 https://nx.dev 了解更多关于 Nx 的信息。