vite について
Viteは、開発サーバーやビルド工程、プラグイン拡張を必要とする開発者向けのWeb開発・ビルドツールです。JavaScript APIとHMR API、各種設定を備え、SSRなどの用途にも対応します。
主な機能
- 01HMR対応の開発サーバーを提供
- 02Webプロジェクトをビルド
- 03プラグインで機能を拡張
- 04アセットと環境変数を設定
- 05SSRと複数ページ入力に対応
活用シーン
- 01Webプロジェクトのローカル開発を開始
- 02プロジェクトのプラグインやエイリアスを設定
- 03複数ページアプリをビルド
- 04SSRまたは静的デプロイを設定
インストール
コマンドをコピーしてターミナルで実行します。
$
npx skills add https:/ / github.com/ itechmeat/ llm-code --skill viteインストール後、Claude Code で/viteを入力して読み込まれたか確認します。
同梱ファイル
SKILL.md と一緒にインストールされる参考資料やスクリプト。
references/api-environment-frameworks.mdapi-environment-instances.mdapi-environment-plugins.mdapi-environment-runtimes.mdapi-environment.mdapi-hmr.mdapi-javascript.mdapi-plugin.mdassets.mdbackend-integration.mdbreaking-changes.mdbuild.mdcli.mdconfig.mddep-pre-bundling.mdenv-and-mode.mdgetting-started.mdmigration.mdperformance.mdphilosophy.mdrolldown.mdssr.mdstatic-deploy.mdtroubleshooting.mdusing-plugins.mdwhy-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 を多用するリンク済み依存関係が、メインの変換パイプラインに近い挙動をするようになりました。
禁止事項
- ベンダーのドキュメントから大量の文章をそのまま転載しないでください。
- 検証せずに、特定のフレームワークに固有の挙動を前提としないでください。
リンク
コメント
Markdown 対応