close
指南
配置
插件
API
部落格
關於
貢獻
指南
配置
插件
API
部落格
關於
貢獻

快速開始

快速上手一個基於 Rspack 的新專案。

設定環境

在開始之前，您需要安裝 Node.js >= 16 版本，建議使用 Node.js LTS 版本。

使用以下命令檢查目前的 Node.js 版本

node -v

如果您的目前環境未安裝 Node.js，或者安裝的版本太低，您可以使用 nvm 或 fnm 來安裝。

以下是如何透過 nvm 安裝的範例

# Install Node.js LTS
nvm install --lts
# Switch to 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 標誌，您可以跳過互動式選擇步驟，並使用一個命令建立專案。

例如，要使用一個命令在 my-project 目錄中建立一個 React 專案

# Rspack CLI
npx create-rspack --dir my-project --template react
# Rsbuild
npx create-rsbuild --dir my-project --template react
# Using abbreviations
npx create-rsbuild -d my-project -t react

線上範例

我們提供了一個基於 Rsbuild 的線上範例。該範例直觀地展示了 Rspack 的建置效能和 Rsbuild 的開發體驗

手動安裝

首先建立一個專案目錄並產生一個 npm `package.json`

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

然後安裝 @rspack/core 和 @rspack/cli 作為開發依賴項

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，您可以參考以下指南

社群生態系統

社群中已經有一些基於 Rspack 的工具鏈

  • 如果您想建立靜態網站，您可以嘗試 Rspress。
  • 如果您想建立函式庫或 UI 元件，您可以嘗試 Rslib。
  • 如果您想分析建置過程和建置產物，您可以嘗試 Rsdoctor。
  • 如果您正在尋找全棧 React 框架，您可以嘗試 Modern.js。
  • 如果您想要一個在 monorepo 中運作的快速且可生產的設置，您可以嘗試 Nx。

訪問 awesome-rspack，以探索 Rspack 生態系統中的更多專案。

Rspress

Rspress 是一個基於 Rspack 的靜態網站產生器。它為建立靜態網站提供完整的解決方案，並包含以下功能

  • 🚀 快速啟動：基於 Rust 的建置工具和 markdown/mdx 編譯器，建置速度極快，為您帶來極致的開發體驗。
  • 📚 MDX 支援：MDX 是一種強大的內容撰寫方式，允許您在 Markdown 中使用 React 元件。
  • 📦 內建全文搜尋：在建置過程中自動為您產生全文搜尋索引，提供開箱即用的全文搜尋功能。
  • 🌈 靜態網站生成：在生產環境中，它會自動構建為靜態 HTML 檔案，可以輕鬆部署到任何地方。
  • 🔌 提供外掛系統：提供外掛系統，您可以根據需求自訂構建流程和主題。

在官方文件中了解更多關於 Rspress 的資訊。

Modern.js

Modern.js 框架是一個基於 Rspack 的漸進式 React 框架，為建構 Web 應用程式提供完整的解決方案。它支援巢狀路由、伺服器端渲染，並提供開箱即用的 CSS 解決方案，例如 styled components 和 Tailwind CSS。

在官方文件中了解更多關於 Modern.js 的資訊。

使用 Nx

在生產環境中快速上手並利用 Rspack 和 React 的最快方式是使用專用的 Rspack Nx 外掛。這會為您提供一個預先配置好的設定，將 Rspack 與 React、TypeScript、ESLint、Jest 和 Cypress 整合，用於 e2e 測試。

執行以下命令以使用 React 和 Rspack 設定新的 Nx 工作區

npm
yarn
pnpm
npx create-nx-workspace myrspackapp --preset=@nx/rspack

預先配置好的設定已經可以與 Rspack、TypeScript、TSX 和 React 一起使用。此外，它還配備了 Jest 和 Cypress 用於測試，以及 ESLint 用於程式碼檢查。

建立完成後，您可以簡單地執行 npm start (或 pnpm start 或 yarn start) 來啟動開發伺服器。您也可以執行 npm run build (或 pnpm run build 或 yarn run build) 來建置用於生產環境的應用程式，類似地，執行 npm run test (或 pnpm run test 或 yarn run test) 來執行單元測試。

您可以在 https://nx.dev 了解更多關於 Nx 的資訊。