#快速上手

#在线示例

我们提供了基于 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 可帮助设置以下常用工具。使用上下箭头和空格进行选择；如不需要这些工具，直接按回车跳过。

#当前目录

如需在当前目录下创建应用，将 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@latest my-app --template react

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

# 指定多个 tools
npx -y create-rsbuild@latest 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>        add additional tools, comma separated
  --skill <skill>       add optional skills, comma separated
  --override            override files in target directory
  --packageName <name>  specify the package name
  --template-version <ver>  specify the npm template version

Available templates:

  vanilla-js, vanilla-ts, react-js, react-ts, vue-js, vue-ts,
  lit-js, lit-ts, preact-js, preact-ts, svelte-js, svelte-ts,
  solid-js, solid-ts

Optional tools:
  react-compiler, rstest, eslint, rslint, biome, prettier, tailwindcss, storybook

Optional skills:
  rsbuild-best-practices, rstest-best-practices, vercel-react-best-practices

#在 Monorepo 中使用 Rsbuild

以下 Monorepo 工具提供了 Rsbuild 集成或示例，可用于在工作区中创建和管理 Rsbuild 应用。

• Nx 通过 @nx/rsbuild 插件支持 Rsbuild，为 Nx 工作区提供生成器和执行器。
• Turborepo 提供创建 Rsbuild 应用和使用 Module Federation 的示例和指南。

#全栈框架

如果你的应用需要全栈能力，可以直接使用基于 Rsbuild 的全栈框架，例如 TanStack Start 或 Modern.js。这类框架基于 Rsbuild 构建，并提供 SSR、路由等更高层的能力。

• React 全栈框架
• Solid 全栈框架

#从现有项目迁移

如需从现有项目迁移到 Rsbuild，参考以下指南：

• 从 webpack 迁移
• 从 Create React App 迁移
• 从 Vue CLI 迁移
• 从 Vite 迁移
• 从 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": {
    // 启动开发服务器，等价于 "rsbuild dev"
    "dev": "rsbuild",
    // 构建用于生产的应用
    "build": "rsbuild build",
    // 在本地预览生产版本
    "preview": "rsbuild preview"
  }
}

参考 CLI 工具 了解所有可用命令和选项。

#入口模块

Rsbuild CLI 默认会自动检测 src/index.(ts|js|tsx|jsx|mts|cts|mjs|cjs) 作为入口模块，可使用 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 新项目。

#下一步

你可能想要：