diff --git a/guide/api-environment-plugins.md b/guide/api-environment-plugins.md index aebe92f4..54d05f71 100644 --- a/guide/api-environment-plugins.md +++ b/guide/api-environment-plugins.md @@ -31,11 +31,19 @@ Vite サーバーには共有プラグインパイプラインがありますが ## フックを使用して新しい環境を登録する {#registering-new-environments-using-hooks} -プラグインは、`config` フックに新しい環境を追加できます(たとえば、[RSC](https://react.dev/blog/2023/03/22/react-labs-what-we-have-been-working-on-march-2023#react-server-components) 用の個別のモジュールグラフを作成する場合など): +プラグインは、`config` フックに新しい環境を追加できます。例えば、[RSC サポート](/plugins/#vitejs-plugin-rsc) では、`react-server` 条件を含む個別のモジュールグラフを持つために追加の環境を使用します: ```ts config(config: UserConfig) { - config.environments.rsc ??= {} + return { + environments: { + rsc: { + resolve: { + conditions: ['react-server', ...defaultServerConditions], + }, + }, + }, + } } ``` @@ -48,8 +56,16 @@ Vite サーバーには共有プラグインパイプラインがありますが ```ts configEnvironment(name: string, options: EnvironmentOptions) { + // rsc 環境に "workerd" 条件を追加 if (name === 'rsc') { - options.resolve.conditions = // ... + return { + resolve: { + conditions: ['workerd'], + }, + } + } + } +``` ``` ## `hotUpdate` フック {#the-hotupdate-hook} diff --git a/guide/features.md b/guide/features.md index a4451f64..9425d23c 100644 --- a/guide/features.md +++ b/guide/features.md @@ -213,6 +213,7 @@ HTML ファイルは、Vite プロジェクトの[中心](/guide/#index-html-and - Vue JSX のサポート: [@vitejs/plugin-vue-jsx](https://github.com/vitejs/vite-plugin-vue/tree/main/packages/plugin-vue-jsx) - React のサポート: [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/tree/main/packages/plugin-react) - SWC を利用している React のサポート: [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/tree/main/packages/plugin-react-swc) +- [React サーバーコンポーネント(RSC)](https://react.dev/reference/rsc/server-components)のサポート: [@vitejs/plugin-rsc](https://github.com/vitejs/vite-plugin-react/tree/main/packages/plugin-rsc) 詳しくは[プラグインガイド](/plugins/)を確認してください。 diff --git a/plugins/index.md b/plugins/index.md index f93660f1..c8b012d6 100644 --- a/plugins/index.md +++ b/plugins/index.md @@ -24,6 +24,16 @@ esbuild と Babel を使用し、小さなパッケージフットプリント 開発中は Babel を SWC に置き換えます。プロダクションビルド時には、プラグインを使用する場合は SWC+esbuild、それ以外は esbuild を使用します。非標準の React 拡張を必要としない大きなプロジェクトでは、コールドスタートやホットモジュールリプレースメント(HMR)が大幅に高速化されます。 +### [@vitejs/plugin-rsc](https://github.com/vitejs/vite-plugin-react/tree/main/packages/plugin-rsc) + +Vite はこのプラグインを通して [React サーバーコンポーネント(RSC)](https://react.dev/reference/rsc/server-components)をサポートしています。このプラグインは、React フレームワークが RSC 機能を統合するために使用できる低レベルのプリミティブを提供する [Environment API](/guide/api-environment) を利用しています。以下を実行してミニマルなスタンドアロン RSC アプリケーションを試すことができます: + +```bash +npm create vite@latest -- --template rsc +``` + +詳しくは [プラグインドキュメント](https://github.com/vitejs/vite-plugin-react/tree/main/packages/plugin-rsc) をお読みください。 + ### [@vitejs/plugin-legacy](https://github.com/vitejs/vite/tree/main/packages/plugin-legacy) 本番環境向けにレガシーブラウザーのサポートを提供します。