vite

Vite

概要

Vite は、ネイティブ ES モジュールによる開発サーバーの即時起動と、Rollup による最適化された本番ビルドを実現する次世代のフロントエンドビルドツールです。設定不要で、TypeScript、JSX、CSS プリプロセッサー、静的アセットを標準でサポートします。

使用する場面： シングルページアプリ、マルチページアプリ、ライブラリの公開、SSR アプリケーション、モノレポのパッケージ、開発時の素早いフィードバックと最適化されたビルドが必要なあらゆるモダンなフロントエンドプロジェクト。

使用しない場面： トランスパイルなしで ES5 出力が必要なレガシーブラウザー、Vite に相当するものがない Webpack 専用ローダーに依存するプロジェクト、JavaScript 以外のビルドパイプライン。

クイックリファレンス

パターン	API	主なポイント
設定ファイル	defineConfig({})	IDE をサポートする型安全な設定
条件付き設定	defineConfig(({ command, mode }) => ({}))	コマンドやモードごとに異なる設定
パスエイリアス	resolve.alias	@/ を src/ にマッピング
開発プロキシ	server.proxy	API リクエストをバックエンドに転送
HMR 設定	server.hmr	WebSocket のホスト／ポート／プロトコル
HTTPS 開発	server.https	TLS 証明書／鍵のオプションを渡す
ビルドターゲット	build.target	出力する ES モジュールのターゲット
手動チャンク	build.rollupOptions.output.manualChunks	コード分割を制御
ライブラリモード	build.lib	ES/CJS/UMD パッケージを公開
SSR ビルド	build.ssr + ssr options	サーバーサイドレンダリングの設定
環境変数	import.meta.env.VITE_*	クライアントに公開する環境変数
loadEnv	loadEnv(mode, root, prefix)	設定ファイル内で環境変数を読み込む
CSS モジュール	css.modules	スコープ化された CSS クラス名
プリプロセッサー	css.preprocessorOptions	Sass/Less/Stylus のオプション
PostCSS	css.postcss	インラインまたは外部の PostCSS 設定
静的アセット	import url from './img.png'	解決済みの公開 URL を返す
プラグイン	{ name, transform, load }	フックベースのプラグインシステム
仮想モジュール	resolveId + load hooks	ビルド時にモジュールを生成
マルチページ	build.rollupOptions.input	複数の HTML エントリーポイント

よくある間違い

間違い	正しいパターン
VITE_ プレフィックスを介してシークレットを公開する	クライアントで安全に使用できる変数にのみ VITE_ を付けます。サーバー専用のシークレットには、設定で loadEnv を使用します
クライアントコードで process.env を使用する	import.meta.env.VITE_* を使用します（Vite はビルド時に置換します）
resolve() を使わずに rollupOptions.input を変更する	絶対パスには常に path.resolve() または import.meta.dirname を使用します
ライブラリモードでピア依存関係を外部化しない	バンドルを避けるため、React/Vue を rollupOptions.external に追加します
SSR で QueryClient スタイルのシングルトンを作成する	リクエスト間の漏えいを避けるため、SSR ではリクエストごとの状態を確保します
postcss.config.js と併せて PostCSS 設定をインラインで記述する	どちらか一方を使用します。インライン設定を使うと設定ファイルの検索が無効になります
末尾のスラッシュなしで base を設定する	base は末尾にスラッシュを付けた /path/ または完全な URL にします
ESM 設定で __dirname を使用する	import.meta.dirname（Node 21+）または fileURLToPath を使用します

委任

• プラグインの検出：Explore エージェントを使用します
• ビルドの分析：Task エージェントを使用します
• 設定のレビュー：code-reviewer エージェントに委任します

vitest-testing スキルが利用可能な場合は、テスト設定と Vitest のセットアップをそのスキルに委任します。 tailwind スキルが利用可能な場合は、Tailwind CSS の設定とユーティリティパターンをそのスキルに委任します。 react-patterns スキルが利用可能な場合は、React コンポーネントのパターンとフックをそのスキルに委任します。 typescript-patterns スキルが利用可能な場合は、TypeScript の設定と型のパターンをそのスキルに委任します。 pnpm-workspace スキルが利用可能な場合は、モノレポのワークスペース設定をそのスキルに委任します。

参考資料

• 設定の基本と defineConfig のパターン
• プラグインの作成と人気のプラグイン
• 開発サーバーの設定：プロキシ、HMR、HTTPS、ミドルウェア
• ビルドの最適化：チャンク分割、ツリーシェイキング、出力制御
• パッケージ公開のためのライブラリモード
• SSR の設定と Express の統合
• 環境変数と .env ファイルの処理
• CSS の処理：PostCSS、CSS モジュール、プリプロセッサ、アセット管理