快速上手

快速上手

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

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

环境准备

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

Node.js

对于 Node.js，请安装 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

Rsbuild 是由 Rspack 驱动的高性能构建工具，由 Rspack 团队开发。它默认包含了一套精心设计的构建配置，提供开箱即用的开发体验，并能够充分发挥出 Rspack 的性能优势。

我们推荐使用 Rsbuild 来创建新项目，执行如下命令即可：

npm

yarn

pnpm

bun

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

yarn

pnpm

bun

npm create rspack@latest

然后按照提示操作。

快速创建

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

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

# Rspack CLI
npx create-rspack --dir my-project --template react
# Rsbuild
npx create-rsbuild --dir my-project --template react
# 使用缩写
npx create-rsbuild -d my-project -t react

在线示例

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

Rsbuild CodeSandbox 示例

你也可以使用豆包 MarsCode 快速创建一个在线的 Rsbuild 项目：

访问 MarsCode - Rsbuild 模板。
登录，点击右上角的「使用模板」按钮即可。

手动安装

首先创建一个项目目录，并生成一个 npm package.json 文件：

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

然后安装 @rspack/core 和 @rspack/cli 为 dev 依赖：

npm

yarn

pnpm

bun

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

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

package.json

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

查看配置 Rspack 来了解如何配置 Rspack。

从现有项目迁移

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

生态

Rspress

Rspress 是一个基于 Rsbuild、React 和 MDX 的静态站点生成器，内置了一套默认的文档主题，你可以通过 Rspress 来快速搭建一个文档站点，同时也可以自定义主题，来满足个性化静态站需求，比如博客站、产品主页等。

Rslib

Rslib 是一个基于 Rsbuild 的 npm 库开发工具，它复用了 Rsbuild 精心设计的构建配置和插件系统，使开发者能够以简单直观的方式创建 JavaScript 库。

Rsdoctor

Rsdoctor 是一个针对 Rspack 的构建分析器，可以直观地展示构建过程，例如编译时间、编译前后的代码变化、模块引用关系、重复模块等。如果您需要排查构建产物或构建时编译问题，可以使用 Rsdoctor。

Modern.js

Modern.js 是一个基于 Rspack 实现的渐进式 React 框架，支持嵌套路由、服务器端渲染（SSR）和模块联邦，并提供开箱即用的 CSS 解决方案。

Nx

Nx 是一个强大的开源构建系统，提供了工具来提升生产力、优化 CI 性能和维护代码质量。

Rspack 团队与 Nx 团队合作提供了 Rspack Nx 插件。该插件包含在 Nx Workspace 中管理 Rspack 项目的执行器、生成器和实用工具。

Docusaurus

Docusaurus 是一个用于快速构建、部署和维护开源项目网站的工具。

Docusaurus v3.6 支持使用 Rspack 作为打包工具，详见 Docusaurus Faster。

Storybook

Storybook Rsbuild 允许你使用 Rsbuild 作为 Storybook 的构建工具，并提供了 React 和 Vue 等 UI 框架的集成。

Nuxt

Nuxt 是一个开源框架，提供了直观且可扩展的方式来使用 Vue.js 创建类型安全、高性能和生产级的全栈 Web 应用程序和网站。

Nuxt v3.14 引入了对 Rspack 的官方支持，详见 Nuxt 3.14。

访问 awesome-rspack 来发现更多 Rspack 生态中的项目。