快速上手#

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

• 创建新项目：使用 CLI 创建一个全新的 Rspack 或 Rsbuild 项目。
• 从现有项目迁移：从一个基于 webpack 的项目迁移到 Rspack。
• 社区生态：发现 Rspack 社区生态中的项目。

环境准备#

在开始使用前，你需要安装 Node.js >= 16 版本，推荐使用 Node.js LTS 版本。

通过以下命令检查当前使用的 Node.js 版本：

node -v

如果你的环境中尚未安装 Node.js，或是版本过低，可以通过 nvm 或 fnm 安装。

下面是通过 nvm 安装的例子：

# 安装 Node.js LTS
nvm install --lts
# 切换到 Node.js LTS
nvm use --lts

创建新项目#

使用 Rsbuild#

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

我们推荐使用 Rsbuild 来创建新项目，执行如下命令即可：

npm create rsbuild@latest

更多信息参考 Rsbuild - 快速上手。

使用 Rspack CLI#

Rspack CLI 是对标 Webpack CLI 的工具，提供基础的 serve 和 build 构建命令。

执行如下命令即可创建基于 Rspack CLI 项目：

npm create rspack@latest

然后按照提示操作。

在线示例#

我们提供了基于 Rsbuild 的在线示例，通过示例项目，你可以直观感受 Rspack 的构建性能和 Rsbuild 的开发体验：

• Rsbuild CodeSandbox 示例

你也可以使用 豆包 MarsCode 快速创建一个在线的 Rsbuild 项目：

1. 访问 MarsCode - Rsbuild 模板。
2. 登录，点击右上角的「使用模板」按钮即可。

手动安装#

首先创建一个项目目录，并生成一个 npm package.json 文件：

mkdir rspack-demo
cd rspack-demo
npm init -y

然后安装 @rspack/core 和 @rspack/cli 为 dev 依赖：

npm add @rspack/core @rspack/cli -D

更新构建脚本以使用 Rspack CLI：

{
  "scripts": {
    "dev": "rspack serve",
    "build": "rspack build"
  }
}

查看 配置 Rspack 来了解如何配置 Rspack。

从现有项目迁移#

如果你需要从一个现有项目迁移迁移到 Rspack 或 Rsbuild，可以参考以下指南：

• 从 Webpack 迁移到 Rspack
• 从 Webpack 迁移到 Rsbuild
• 从 Create React App 迁移到 Rsbuild
• 从 Vue CLI 迁移到 Rsbuild
• 从 Vite 迁移到 Rsbuild
• 从 Storybook 迁移

社区生态#

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

• 如果你需要开发一个静态站点（如文档站），可以尝试 Rspress。
• 如果你需要开发一个工具库或组件库，可以尝试 Rslib。
• 如果你需要分析构建过程和构建产物，可以尝试 Rsdoctor。
• 如果你需要一个 React 全栈框架来构建 Web 应用，可以尝试 Modern.js。
• 如果你需要在 Monorepo 中使用 Rspack，打造快速、可扩展的构建系统，可以尝试 Nx。

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

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。

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 的信息。