#快速上手

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

• 创建新项目：选择合适的工具，创建基于 Rspack 的新项目。
• 从现有项目迁移：从一个基于 webpack 的项目迁移到 Rspack。

#生态

作为一个底层打包工具，Rspack 拥有丰富的技术生态，包含多种框架、工具和解决方案。这些生态项目涵盖了从框架到开发工具的各个方面，能够满足不同场景下的开发需求，提供开箱即用的体验。

查看 生态 页面来探索这些生态项目。

#环境准备

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

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

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

#创建新项目

#Web 应用

如果你要构建 Web 应用，我们推荐使用 Rsbuild。它基于 Rspack，内置常用构建配置和开发服务器，并提供 React、Vue 等框架集成，帮助你快速开始开发。需要定制构建行为时，也可以通过配置和插件扩展，或调整底层 Rspack 配置。

执行如下命令并按照提示操作：

npm create rsbuild@latest

yarn create rsbuild

pnpm create rsbuild@latest

bun create rsbuild@latest

deno init --npm rsbuild@latest

查看 Rsbuild - 快速上手 了解更多。

#JavaScript 库

如果你要开发工具库、组件库等供其他项目使用的 JavaScript 库，我们推荐使用 Rslib。它基于 Rsbuild，提供面向库开发的默认配置，支持生成 ESM、CommonJS 产物和 TypeScript 类型声明，方便发布到 npm 或在多个项目间复用。

执行如下命令并按照提示操作：

npm create rslib@latest

yarn create rslib

pnpm create rslib@latest

bun create rslib@latest

deno init --npm rslib@latest

查看 Rslib - 快速上手 了解更多。

#直接使用 Rspack CLI

如果你希望自行组织构建流程、直接维护 Rspack 配置，可以使用 Rspack CLI。它提供开发、构建和预览命令，你需要自行选择和配置 loader、插件等构建能力。

#使用脚手架

执行如下命令，按照提示从模板创建项目：

npm create rspack@latest

yarn create rspack

pnpm create rspack@latest

bun create rspack@latest

deno init --npm rspack@latest

#手动安装

你也可以手动安装 Rspack CLI 并创建配置文件。首先创建一个项目目录，并生成一个 npm package.json 文件：

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

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

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

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

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

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

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

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

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

接下来，查看 配置 Rspack 来了解如何配置 Rspack。

#从现有项目迁移

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

• 从 webpack 迁移到 Rspack
• 从 webpack 迁移到 Rsbuild
• 从 Create React App 迁移到 Rsbuild
• 从 Vue CLI 迁移到 Rsbuild
• 从 Vite 迁移到 Rsbuild
• 从 Tsup 迁移到 Rslib
• 从 Storybook 迁移

#安装 canary 版本

当你需要测试或验证 Rspack 未发布至稳定版的功能时，可能需要使用 canary 版本。

Rspack canary 版本的 scope 会带有 -canary 后缀。例如 @rspack/core 的 canary 包名为 @rspack-canary/core。要使用这些版本，你可以配置包管理器（npm/yarn/pnpm/bun）的 overrides。

以下是使用 pnpm overrides 的示例：

{
  "pnpm": {
    "overrides": {
      "@rspack/core": "npm:@rspack-canary/core@latest"
    },
    "peerDependencyRules": {
      "allowAny": ["@rspack/*"]
    }
  }
}

此外，Rspack 社区提供了 install-rspack 工具来方便地安装 canary 版本：

npx install-rspack --version latest # 安装当前的 latest 版本
npx install-rspack --version canary # 安装当前的 canary 版本
npx install-rspack --version 1.0.0-canary-d614005-20250101082730 # 安装指定的 canary 版本