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 フラグを設定することで、インタラクティブな選択手順をスキップし、1 つのコマンドでプロジェクトを作成できます。

たとえば、`my-project` ディレクトリに React プロジェクトを 1 つのコマンドで作成するには

# 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 を試すことができます。
  • モノレポで動作する高速で本番対応のセットアップが必要な場合は、Nx を試すことができます。

Rspack エコシステム内のより多くのプロジェクトを見つけるには、awesome-rspack にアクセスしてください。

Rspress

Rspress は、Rspack に基づいた静的サイトジェネレーターです。静的サイトを構築するための完全なソリューションを提供し、次の機能が含まれています

  • 🚀 高速起動: Rust ベースのビルドツールと markdown/mdx コンパイラに基づいており、ビルド速度が非常に速く、究極の開発エクスペリエンスを提供します。
  • 📚 MDX サポート: MDX はコンテンツを記述するための強力な方法で、Markdown で React コンポーネントを使用できます。
  • 📦 組み込みの全文検索: ビルドプロセス中に自動的に全文検索インデックスを生成し、すぐに使用できる全文検索機能を提供します。
  • 🌈 静的サイト生成: 本番環境では、静的な HTML ファイルに自動的にビルドされ、どこにでも簡単にデプロイできます。
  • 🔌 プラグインシステムの提供: プラグインシステムを提供することで、必要に応じてビルドプロセスとテーマをカスタマイズできます。

公式ドキュメントで Rspress について詳しく学習してください。

Modern.js

Modern.js Framework は、Rspack ベースのプログレッシブ React フレームワークで、Web アプリケーションを構築するための完全なソリューションを提供します。ネストされたルート、サーバーサイドレンダリングをサポートし、styled components や Tailwind CSS などのすぐに使用できる CSS ソリューションを提供します。

公式ドキュメントで Modern.js について詳しく学習してください。

Nx を使用する

RspackとReactを本番環境ですぐに活用するための最も早い方法は、専用のRspack Nxプラグインを使用することです。これにより、RspackとReact、TypeScript、ESLint、Jest、およびe2eテスト用のCypressを統合した、事前設定済みの環境が提供されます。

ReactとRspackを使用した新しいNxワークスペースをセットアップするには、次のコマンドを実行します。

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

事前設定済みの環境は、Rspack、TypeScript、TSX、Reactですぐに動作するように準備されています。さらに、テスト用のJestとCypress、およびLint用の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）でユニットテストを実行できます。

Nxの詳細については、https://nx.devで確認できます。