#快速上手

#在线示例

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

• StackBlitz 示例
• CodeSandbox 示例

#环境准备

Rsbuild 支持使用 Node.js、Deno 或 Bun 作为 JavaScript 运行时。

你可以参考以下安装指南，选择其中一种运行时：

• 安装 Node.js
• 安装 Bun
• 安装 Deno

#创建 Rsbuild 应用

使用 create-rsbuild 来创建一个 Rsbuild 应用，运行以下命令：

npm create rsbuild@latest

yarn create rsbuild

pnpm create rsbuild@latest

bun create rsbuild@latest

deno init --npm rsbuild@latest

按照提示一步步操作即可。在创建过程中，你可以选择是否需要 TypeScript、ESLint 等额外的工具。

在创建完成后，你可以执行以下步骤：

• 执行 git init 来初始化 Git 仓库。
• 执行 npm install（或其他包管理器的 install 命令）安装 npm 依赖。
• 执行 npm run dev 启动开发服务器，服务器默认运行在 localhost:3000。

#模板

在创建应用时，你可以选择 create-rsbuild 提供的下列模板，查看集成指南了解更多信息。

create-rsbuild 提供了开箱即用的基础模板，你还可以通过以下方式获取更丰富的模板：

• 前往 Rspack - 生态 了解基于 Rsbuild 的各种上层工具。
• 前往 awesome-rstack - Starter 获取更多社区维护的模板。

#可选工具

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

◆  Select additional tools (Use <space> to select, <enter> to continue)
│  ◻ Add Biome for code linting and formatting
│  ◻ Add ESLint for code linting
│  ◻ Add Prettier for code formatting
│  ◻ Add Storybook for component development
└

#当前目录

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

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

#非交互模式

create-rsbuild 支持通过命令行选项进入非交互模式。使用该模式可以跳过所有提示，直接创建项目，适合脚本、CI 以及 coding agents 等自动化场景。

例如，以下命令将在 my-app 目录中创建一个 React 应用：

npx -y create-rsbuild --dir my-app --template react

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

# 指定多个 tools
npx -y create-rsbuild -d my-app -t react --tools eslint,prettier

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

Usage: create-rsbuild [dir] [options]

Options:

  -h, --help            display help for command
  -d, --dir <dir>       create project in specified directory
  -t, --template <tpl>  specify the template to use
  --tools <tool>        select additional tools (biome, eslint, prettier, storybook)
  --override            override files in target directory
  --packageName <name>  specify the package name

Templates:

  react-js, react-ts, vue3-js, vue3-ts, vue2-js, vue2-ts, svelte-js, svelte-ts,
  solid-js, solid-ts, vanilla-js, vanilla-ts

#从现有项目迁移

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

• 从 webpack 迁移
• 从 Create React App 迁移
• 从 Vue CLI 迁移
• 从 Vite 迁移
• 从 Modern.js Builder 迁移
• 从 Tsup 迁移到 Rslib
• 从 Storybook 迁移到 Storybook Rsbuild

#其他项目

如果你的项目不属于上述迁移指南中提到的类型，你也可以直接安装 @rsbuild/core 包：

npm add @rsbuild/core -D

yarn add @rsbuild/core -D

pnpm add @rsbuild/core -D

bun add @rsbuild/core -D

deno add npm:@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 配置项来修改入口模块。

export default {
  source: {
    entry: {
      foo: './src/pages/foo/index.ts',
      bar: './src/pages/bar/index.ts',
    },
  },
};

#核心 npm 包

#@rsbuild/core

Rsbuild 核心包，提供 CLI 命令和 JavaScript API。

#create-rsbuild

用于创建 Rsbuild 新项目。

#下一步

你可能想要：