mcpField
V
vite

vite

github.com/itechmeat開発23110 回インストール2 週間前に更新
リポジトリ

vite について

Viteは、開発サーバーやビルド工程、プラグイン拡張を必要とする開発者向けのWeb開発・ビルドツールです。JavaScript APIとHMR API、各種設定を備え、SSRなどの用途にも対応します。

主な機能

  1. 01HMR対応の開発サーバーを提供
  2. 02Webプロジェクトをビルド
  3. 03プラグインで機能を拡張
  4. 04アセットと環境変数を設定
  5. 05SSRと複数ページ入力に対応

活用シーン

  1. 01Webプロジェクトのローカル開発を開始
  2. 02プロジェクトのプラグインやエイリアスを設定
  3. 03複数ページアプリをビルド
  4. 04SSRまたは静的デプロイを設定

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/itechmeat/llm-code --skill vite

インストール後、Claude Code で/viteを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

references/
api-environment-frameworks.md
api-environment-instances.md
api-environment-plugins.md
api-environment-runtimes.md
api-environment.md
api-hmr.md
api-javascript.md
api-plugin.md
assets.md
backend-integration.md
breaking-changes.md
build.md
cli.md
config.md
dep-pre-bundling.md
env-and-mode.md
getting-started.md
migration.md
performance.md
philosophy.md
rolldown.md
ssr.md
static-deploy.md
troubleshooting.md
using-plugins.md
why-vite.md

詳細

Vite

クイックナビゲーション

  • はじめに:references/getting-started.md
  • 理念と背景:references/philosophy.md, references/why-vite.md
  • 機能:references/features.md
  • CLI:references/cli.md
  • プラグイン(使用方法):references/using-plugins.md
  • プラグイン API:references/api-plugin.md
  • HMR API:references/api-hmr.md
  • JavaScript API:references/api-javascript.md
  • 設定リファレンス:references/config.md
  • 依存関係の最適化:references/dep-pre-bundling.md
  • アセット:references/assets.md
  • ビルド:references/build.md
  • 静的デプロイ:references/static-deploy.md
  • 環境変数とモード:references/env-and-mode.md
  • SSR:references/ssr.md
  • バックエンドとの統合:references/backend-integration.md
  • トラブルシューティング:references/troubleshooting.md
  • パフォーマンス:references/performance.md
  • Rolldown:references/rolldown.md
  • 移行:references/migration.md
  • 破壊的変更:references/breaking-changes.md
  • 環境 API:references/api-environment.md
  • 環境インスタンス:references/api-environment-instances.md
  • 環境プラグイン:references/api-environment-plugins.md
  • 環境フレームワーク:references/api-environment-frameworks.md
  • 環境ランタイム:references/api-environment-runtimes.md

基本ルール

  • 設定は最小限にし、必要に応じて拡張してください。
  • Vite のデフォルトを使用する場合は、index.html を第一級のエントリーポイントとして扱ってください。
  • 開発サーバーの設定とビルドの設定は分けて扱ってください。
  • 環境変数と define のモード依存の動作を文書化してください。
  • 移行前に非推奨の警告を有効にするには、future 設定を使用してください。

レシピ

  • npm create vite@latest でプロジェクトを作成します。
  • vite.config.* でエイリアス、サーバーオプション、ビルド出力を設定します。
  • 設定で .env の値が必要な場合は、loadEnv で読み込みます。
  • plugins: [] でプラグインを追加し、必要に応じて apply または enforce を定義します。
  • プラグインやフレームワークで細かい更新が必要な場合は、HMR API を使用します。
  • 起動時に依存関係が検出されない場合は、optimizeDeps.include/exclude を使用します。
  • マルチページアプリでは、build.rollupOptions.input を使用します。
  • index.html がないアプリでは、トップレベルの input オプションを使ってエントリーポイントを一度だけ宣言します。デフォルトで build.rolldownOptions.input、build.lib.entry、build.ssr、optimizeDeps.entries に反映されます。
  • 非推奨の警告を有効にします:future: { removeSsrLoadModule: 'warn' }。
  • 環境に対応した HMR には、handleHotUpdate ではなく hotUpdate フックを使用します。
  • プラグインフックでは、options.ssr ではなく this.environment を使用します。

リリースの主な変更点(8.0.0)

  • baseline-widely-available に基づき、デフォルトのブラウザーターゲットがさらに引き上げられました。
  • CommonJS のデフォルトインポート相互運用性がより一貫したものになり、以前の曖昧な動作に依存していたパッケージが問題を起こす可能性があります。
  • Vite はフォーマットの推測による browser と module の解決を停止し、設定された resolve.mainFields により厳密に従うようになりました。
  • JavaScript API の build() は、Rolldown レベルのエラーが複数ある場合、ネストされた .errors を含む BundleError をスローするようになりました。
  • Rolldown への移行がより明確になりました。build.rollupOptions / worker.rollupOptions は非推奨となり、*.rolldownOptions が推奨されます。

リリースの主な変更点(8.1.0 -> 8.1.5)

  • WASM ESM 統合:.wasm の直接インポートが、ネイティブに ES モジュールとして動作します。
  • 設定不要のビルドキャッシュ:Vite Task との統合により、手動で設定せずにビルドをキャッシュできます。
  • server.hmr の server.ws への名称変更:WebSocket オプションが server.ws の下に移動しました。HMR のトランスポートオプションを設定している場合は、設定を更新してください。
  • 新しいオプション:HTML 変換時のカスタムアセットソースを指定する html.additionalAssetSources、import.meta.glob の caseSensitive、__VITE_ADDITIONAL_SERVER_ALLOWED_HOSTS による複数ホストの指定、拡張されたデフォルトの server.fs.deny リストが追加されました。
  • 8.1.1 -> 8.1.5:安定性の改善のみ(スタックトレースの処理、依存関係の更新、モジュール解決のエッジケース)。

リリースの注目点(8.2.0)

  • 新しいトップレベルの input オプション:input: string | string[] | { [entryAlias: string]: string } はプロジェクトルートを基準に解決され、未設定の場合は build.rolldownOptions.input、build.lib.entry、build.ssr(true に設定されている場合)、optimizeDeps.entries のデフォルト値になります。index.html を使わないアプリで、複数のオプションに同じエントリーパスを繰り返し記述せずに済むため便利です。解決された input パスは server.fs.allow にも追加され、インポートされたモジュールと同様に許可されます。
  • バンドル開発モード(experimental.bundledDev):境界のない編集が行われると、リロードは正確に1回だけ発生します。クライアントはまずサーバーに再ビルドを指示し、その後に full-reload を発行するため、編集からリロードまでの間に「バンドル処理中」のフォールバックページが表示されなくなりました。ワーカーファイル(new Worker(new URL(...))、?worker インポート)も、編集後に古い状態のままになることなく、HMR を通じて正しく再出力されるようになりました。
  • ネイティブローダー/ネイティブ設定との互換性:configLoader: 'native' がサポートしていない機能に関する警告に、行番号に加えて列番号も含まれるようになりました。また、仮想モジュールはネイティブ設定の互換性チェックから除外され、プラグインが生成した仮想ファイルによる誤検知が発生しなくなりました。
  • 型安全な PostCSS 設定:Vite は PostcssUserConfig(postcss-load-config の Config 型を再エクスポートしたもの)をエクスポートするため、postcss.config.js/.ts に直接型を付けられます。
  • ネットワーク URL のラベル表示:開発サーバーのネットワーク URL で、server.host が明示的なアドレスに設定されている場合でも(Vite がすべてのインターフェースを自動検出した場合に限らず)、OS のネットワークインターフェース名(例:eth0、wlan0)が解決され、表示されるようになりました。
  • Rolldown とオプティマイザーの更新:Rolldown が ~1.2.0 に更新され、クライアント側の HMR 処理が experimental.bundledDev に追加されました。依存関係オプティマイザーのロックファイルハッシュキャッシュは aube-lock.yaml(Aube)と nub.lock(nub)も認識するようになり、これらのパッケージマネージャーで依存関係が変更されたときに node_modules/.vite が正しく無効化されます。

パッチノート(8.0.14 -> 8.0.16)

  • Rolldown が 1.0.3 に更新されました(8.0.14 では 1.0.2)。プラグインやビルドに関するガイダンスを管理している場合は、初期の 8.0.x のパッチの挙動を前提とせず、現在の Rolldown の挙動に照らして検証してください。
  • リクエストがタイムアウトした場合、開発サーバーが接続をハングさせず、HTTP 408 を送信するようになりました(8.0.15)。
  • launch-editor-middleware が UNC パスと Windows の代替パスを拒否し、ローカルのパストラバーサルにつながる脆弱性を解消しました(8.0.16)。開発サーバーを localhost の外部に公開する場合に関係します。
  • 8.0.15 の修正:/@fs/ の HTML プロキシキャッシュキーの不一致、該当ファイルがない場合の仮想モジュール内の相対 glob に関するエラー、write() が拒否された場合の Rolldown バンドルのクローズ、JS プラグインコンテナー内の viteResolvePlugin に対する onWarn。
  • transformIndexHtml が末尾にスラッシュのあるパスをより確実に処理するようになりました。ディレクトリ形式の URL で HTML を書き換えたり挿入したりするプラグインや静的デプロイ設定で役立ちます。
  • 依存関係のスキャンで Oxc の JSX オプションがオプティマイザーの処理経路に引き渡されるようになり、JSX を多用するリンク済み依存関係が、メインの変換パイプラインに近い挙動をするようになりました。

禁止事項

  • ベンダーのドキュメントから大量の文章をそのまま転載しないでください。
  • 検証せずに、特定のフレームワークに固有の挙動を前提としないでください。

リンク

コメント