vite

Vite の運用

Vite ツールチェーン自体（プロジェクトの検出、設定とプラグインの動作、環境変数の読み込み、開発サーバーの診断、本番ビルド、アセットとデプロイの境界）には、このスキルを使用します。アプリケーションのアーキテクチャと UI の実装はフロントエンドエンジニアリング、インフラストラクチャと CI の設計はプラットフォームエンジニアリング、ブラウザーテストはplaywright、アクセシビリティの実装とレビューはweb-accessibilityで扱います。

運用上の契約

1. 変更の前に状況を把握します。 package.json、ロックファイル、vite.config.*、tsconfig*.json、スクリプト、フレームワークプラグイン、デプロイ時の前提を確認します。ロックファイルからパッケージマネージャーを特定し、コマンドを推測で作らないでください。
2. 実際のツールチェーンを確認します。 このスキルまたはプロジェクトのルートから scripts/vite-doctor --json を実行し、Node、パッケージマネージャー、Vite パッケージ、設定、環境に関する情報を取得します。ドキュメントに記載された Vite のバージョンは、インストール済みのバージョンを証明するものではありません。
3. 設定を明示的に保ちます。 root、base、resolve.alias、プラグイン、server.host/port、preview、build.outDir、build.rollupOptions、define を確認します。define と import.meta.env はコンパイル時の公開データとして扱い、VITE_* 変数やクライアントバンドルにシークレットを含めないでください。
4. 成功を報告する前にビルドします。 プロジェクトに既存のスクリプト（通常は npm run build、pnpm build、yarn build、または bun run build）をタイムアウトを設定して実行します。出力ファイルと警告を確認し、可能であればデプロイ先のベースパスでビルド済みアプリを実際に動作させます。
5. 変更操作には承認を必要とします。 読み取り専用の調査は進めてかまいません。パッケージのインストール、設定の編集、出力の削除、サーバーの起動、デプロイ設定の変更を行う前に、対象、範囲、ロールバック方法を確認します。新しい出力ディレクトリまたはバージョン管理される変更を優先し、ユーザーの未コミットの作業を上書きしないでください。
6. 証拠の共有範囲を限定します。 ログとエラーは要約し、.env の内容、トークン、バンドル全体、生成された依存関係ツリーを貼り付けないでください。

一般的なワークフロー

• 新規プロジェクトまたは移行： Node とパッケージマネージャーを確認し、既存のアプリケーションのエントリーポイントを調査して、フレームワークプラグインを選び、ロックファイルを維持します。公式の Vite スキャフォールドを使うのは、対象ディレクトリが空であるか、明示的な承認を得ている場合に限ります。
• 設定の変更： 変更を最小限に抑え、base とアセットパスが引き続き正しい理由を説明し、本番ビルドを実行します。設定ファイルは実行可能コードです。任意の設定値を define に読み込まないでください。
• 環境の問題： .env、.env.local、モード別のファイル、プロセス環境を区別します。デフォルトで公開されるのは VITE_ が接頭辞に付いた変数のみです。変更後は開発サーバーを再起動します。値を表示せずに、必要な値が設定されていることを検証します。
• 開発サーバーの問題： ポート、ホスト、プロキシ、リクエストが同一オリジンかどうかを確認します。他のデバイスからサーバーにアクセスするには、ホストの明示的な設定とネットワークポリシーの確認が必要な場合があります。安易に公開しないでください。
• ビルドの問題： 対処可能な最初のエラーを記録し、プラグインと Node／Vite の互換性を確認します。承認を得てから、再現可能なキャッシュのみを削除し、失敗した最小限のコマンドを再実行します。モジュール解決の失敗を広範なエイリアス変更で取り繕わないでください。
• デプロイの問題： base、SPA フォールバック、静的アセットのキャッシュ、ホスティングプラットフォームの出力ディレクトリを確認します。ビルドが成功しても、ディープリンクやクライアント側のルーティングが動作する証明にはなりません。

参照先の選択

読み込むタイミング	参照先
設定、プラグイン、モード、環境変数、エイリアス、公開アセット	references/config-and-environments.md
ビルド出力、依存関係のエラー、パフォーマンス、デプロイ	references/build-and-deploy.md
開発サーバー、プロキシ、プレビュー、診断、安全な運用	references/dev-server-and-diagnostics.md

検証の境界

Vite のタスクは、要求された設定または成果物が存在し、関連するコマンドが正常に終了し、検証の境界が確認された時点で完了です。ビルドではビルド出力、デプロイでは到達可能なルートとアセット、E2E の主張では playwright を通じたユーザーに見えるブラウザーの動作を確認します。テストしていないブラウザー、ホスト、モード、デプロイに関する前提があれば、明示してください。

使用しない場合

• フロントエンドコンポーネントのアーキテクチャ、状態、レスポンシブ UI、または一般的なウェブ実装：frontend-engineering。
• インフラストラクチャ、CI ランナー、コンテナー、ホスティングのトポロジー、またはリリースポリシー：platform-engineering。
• ブラウザー自動化の作成または運用：playwright。
• WCAG 監査、アクセシブルなインタラクション設計、またはセマンティックアクセシビリティの改善：web-accessibility。
• Rollup の内部仕様、または Vite 以外のバンドラーへの移行：該当するツールまたは方法論のスキルを使用してください。既存の Vite プロジェクトでは、引き続き Vite 固有の動作を参照できます。