快速上手#

在线示例#

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

• Rsbuild codesandbox 示例

环境准备#

在开始使用前，你需要安装 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 项目#

你可以使用 create-rsbuild 来创建一个 Rsbuild 项目，调用以下命令：

npm create rsbuild@latest

然后按照提示操作即可。

模板#

在创建项目时，你可以选择 create-rsbuild 提供的下列模板：

可选工具#

create-rsbuild 能够帮助你设置一些常用的工具，包括 Biome、ESLint 和 prettier，你可以使用上下箭头和空格进行选择。如果你不需要这些工具，可以直接按回车跳过。

◆  Select additional tools (press enter to continue)
│  ◻ Add Biome for code linting and formatting
│  ◻ Add ESLint for code linting
│  ◻ Add Prettier for code formatting
└

当前目录#

如果你需要在当前目录下创建项目，可以将 target folder 设置为 .：

◆  Create Rsbuild Project
│
◇  Project name or path
│  .
│
◇  "." is not empty, please choose:
│  Continue and override files

快速创建#

create-rsbuild 提供了一些 CLI 选项。通过设置这些 CLI 选项，你可以跳过交互式的选择步骤，一键创建项目。

比如，一键创建 React 项目到 my-project 目录：

npx create-rsbuild --dir my-project --template react

# 使用缩写
npx create-rsbuild -d my-project -t react

create-rsbuild 完整的 CLI 选项如下：

Usage: create-rsbuild [options]

Options:

  -h, --help       display help for command
  -d, --dir        create project in specified directory
  -t, --template   specify the template to use
  --tools          select additional tools (biome, eslint, prettier)
  --override       override files in target directory

Templates:

  react            react-ts
  vue3             vue3-ts
  vue2             vue2-ts
  lit              lit-ts
  preact           preact-ts
  svelte           svelte-ts
  solid            solid-ts
  vanilla          vanilla-ts

从现有项目迁移#

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

• 从 Webpack 迁移
• 从 Create React App 迁移
• 从 Vue CLI 迁移
• 从 Vite 迁移
• 从 Modern.js Builder 迁移

其他项目#

对于其他类型的项目，你可以手动安装 @rsbuild/core 包：

npm add @rsbuild/core -D

然后参考指南和文档，按需启用各个功能：

• 参考 CLI 工具 来了解可用的 CLI 命令。
• 参考 插件列表 来选择 Rsbuild 插件。
• 参考 配置 Rsbuild 进行配置。

命令行工具#

Rsbuild 内置了一个轻量的命令行工具，包含 dev、build 等命令。

{
  "scripts": {
    // 启动开发服务器
    "dev": "rsbuild dev",
    // 构建用于生产的应用
    "build": "rsbuild build",
    // 在本地预览生产版本
    "preview": "rsbuild preview"
  }
}

请参考 CLI 工具 来了解所有可用的命令以及选项。

入口模块#

Rsbuild CLI 默认会使用 src/index.(js|ts|jsx|tsx) 作为入口模块，你可以使用 source.entry 配置项来修改入口模块。

下一步#

你可能想要：