快速入门#

快速上手基于 Rspack 的新项目。

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

设置环境#

在开始之前，您需要安装 Node.js >= 版本 16，建议使用 Node.js LTS 版本。

使用以下命令检查当前 Node.js 版本

node -v

如果您在当前环境中没有安装 Node.js，或者安装的版本过低，可以使用 nvm 或 fnm 进行安装。

以下是如何使用 nvm 安装的示例

# Install Node.js LTS
nvm install --lts
# Switch to 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 命令。

Rsbuild 支持 Node.js >= 16，但 Rspack CLI 要求 Node.js 版本 >= 18.12.0。

运行以下命令创建 Rspack CLI 项目

npm create rspack@latest

然后按照终端中的提示操作。

快速创建#

create-rspack 和 create-rsbuild 提供了一些 CLI 标志。通过设置这些 CLI 标志，您可以跳过交互式选择步骤，并使用一条命令创建项目。

例如，要使用一条命令在 my-project 目录中创建一个 React 项目

# Rspack CLI
npx create-rspack --dir my-project --template react
# Rsbuild
npx create-rsbuild --dir my-project --template react
# Using abbreviations
npx create-rsbuild -d my-project -t react

在线示例#

我们提供了一个基于 Rsbuild 的在线示例。该示例直观地展示了 Rspack 的构建性能和 Rsbuild 的开发体验

• Rsbuild CodeSandbox 示例

手动安装#

首先创建一个项目目录并生成一个 npm `package.json`

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

然后将 @rspack/core 和 @rspack/cli 作为开发依赖项安装

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.
• 如果您想构建一个库或 UI 组件，可以尝试使用 Rslib.
• 如果您想分析构建过程和构建产物，可以尝试使用 Rsdoctor.
• 如果您正在寻找一个完整的全栈 React 框架，可以尝试使用 Modern.js.
• 如果您想要一个快速且可用于生产环境的设置，可在单仓库中运行，可以尝试使用 Nx.

访问 awesome-rspack 探索 Rspack 生态中的更多项目。

Rspress#

Rspress 是一个基于 Rspack 的静态网站生成器。它为构建静态网站提供了完整的解决方案，并包含以下功能

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

在 官方文档 中了解更多有关 Rspress 的信息。

Modern.js#

Modern.js 框架 是一个基于 Rspack 的渐进式 React 框架，为构建 Web 应用程序提供完整的解决方案。它支持嵌套路由、服务器端渲染，并提供开箱即用的 CSS 解决方案，例如 styled components 和 Tailwind CSS。

在 官方文档 中了解更多有关 Modern.js 的信息。

使用 Nx#

在生产环境中快速上手并使用 Rspack 和 React 的最快方法是使用专用的 Rspack Nx 插件。这为您提供了一个预配置的设置，将 Rspack 与 React、TypeScript、ESLint、Jest 和 Cypress 集成以进行端到端测试。

运行以下命令设置一个包含 React 和 Rspack 的新 Nx 工作区

npx create-nx-workspace myrspackapp --preset=@nx/rspack

预配置的设置已经可以与 Rspack、TypeScript、TSX 和 React 一起使用。此外，它还提供了 Jest 和 Cypress 进行测试，以及 ESLint 进行代码检查。

创建完成后，只需 npm start（或 pnpm start 或 yarn start）即可启动开发服务器。您还可以运行 npm run build（或 pnpm run build 或 yarn run build）构建用于生产环境的应用程序，类似地，运行 npm run test（或 pnpm run test 或 yarn run test）运行单元测试。

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