Vite パターン

Vite 8+ プロジェクトのビルドツールおよびデベロップメントサーバーのパターン。設定、環境変数、プロキシ設定、ライブラリモード、依存関係の事前バンドル、一般的な本番環境の落とし穴をカバー。

使用するタイミング

• vite.config.ts または vite.config.js を設定するとき
• 環境変数または .env ファイルを設定するとき
• APIバックエンド用のデベロップメントサーバープロキシを設定するとき
• ビルド出力（チャンク、ミニファイ、アセット）を最適化するとき
• build.lib でライブラリを公開するとき
• 依存関係の事前バンドルまたはCJS/ESM相互運用のトラブルシューティングをするとき
• HMR、デベロップメントサーバー、またはビルドエラーをデバッグするとき
• Viteプラグインの選択または順序付けをするとき

動作の仕組み

• デベロップメントモードはソースファイルをネイティブESMとして提供します（バンドルなし）。変換はモジュールリクエストごとにオンデマンドで行われるため、コールドスタートが速くHMRが精確です。
• ビルドモードはRolldown（v7+）またはRollup（v5〜v6）を使用して、ツリーシェイキング、コード分割、Oxcベースのミニファイでアプリを本番用にバンドルします。
• 依存関係の事前バンドルはesbuildを通じてCJS/UMD依存関係をESMに一度変換し、結果を node_modules/.vite にキャッシュします。これにより後続の起動では処理をスキップできます。
• プラグインはデベロップメントとビルドにわたって統一されたインターフェースを共有します。同じプラグインオブジェクトが、デベロップメントサーバーのオンデマンド変換と本番パイプラインの両方で機能します。
• 環境変数はビルド時に静的にインライン化されます。VITE_ プレフィックス付きの変数はバンドル内のパブリック定数になり、プレフィックスなしのものはクライアントコードから見えません。

例

設定の構造

基本設定

// vite.config.ts
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: { '@': new URL('./src', import.meta.url).pathname },…