v3 からの移行 #

Rollup 3 #

Vite は現在、Rollup 3を使用しており、Vite 内部のアセット処理を簡素化でき、多くの改良が施されています。Rollup 3 のリリースノートはこちら を参照してください。

Rollup 3 は Rollup 2 とほぼ互換性があります。プロジェクトでカスタム rollupOptions を使用していて問題が発生した場合、Rollup migration guide を参照して設定を更新してください。

モダンブラウザのベースラインの変更 #

最新のブラウザ ビルドは、ES2020 との互換性を高めるために、デフォルトで safari14 をターゲットにしました（safari13 からバンプされました）。これは、モダンビルドで BigInt が使えるようになったことと、Null 合体演算子 がトランスパイルされなくなったことを意味します。古いブラウザをサポートする必要がある場合は、通常通り @vitejs/plugin-legacy を追加すればよいでしょう。

一般的な変更点 #

エンコーディング #

ビルドのデフォルトの文字セットが utf8 になりました（詳しくは #10753 を参照）。

CSS を文字列としてインポートする #

Vite 3 では、.css ファイルのデフォルトエクスポートをインポートすると、CSS の二重読み込みが発生することがありました。

import cssString from './global.css'

この二重読み込みは、.css ファイルが出力され、その CSS 文字列がアプリケーションコードでも使用される可能性があるためです（たとえば、フレームワークのランタイムによって注入されます）。Vite 4 からは、.css のデフォルトエクスポートは 非推奨 になっています。この場合、インポートされた .css スタイルを出力しないので、?inline クエリーサフィックス修飾子を使用する必要があります。

import stuff from './global.css?inline'

デフォルトは本番環境用ビルド #

vite build は、渡された --mode に関係なく、常に本番環境用にビルドするようになりました。以前は、mode を production 以外に変更すると、開発用にビルドされていました。もし、開発用にビルドしたい場合は、.env.{mode} ファイルで NODE_ENV=development を設定します。

この変更の一部として、vite dev と vite build は process.env.NODE_ENV が既に定義されている場合は上書きしないようになりました。そのため、ビルド前に process.env.NODE_ENV = 'development'' を設定した場合、開発用のビルドも行われるようになります。これにより、複数のビルドや開発用サーバを並行して動作させる際に、よりコントロールしやすくなります。

詳しくは、更新された mode のドキュメントを参照してください。

環境変数 #

Vite では dotenv 16 と dotenv-expand 9 を使うようになりました（以前は dotenv 14 と dotenv-expand 5）。# や ` を含む値がある場合は、それらを引用符で囲む必要があります。

-VITE_APP=ab#cd`ef
+VITE_APP="ab#cd`ef"

詳しくは dotenv と dotenv-expand 変更履歴を参照してください。

高度な内容 #

プラグインやツールの作成者にのみ影響する変更点があります。

• [#11036] feat(client)!: remove never implemented hot.decline
  • 代わりに hot.invalidate を使ってください
• [#9669] feat: align object interface for transformIndexHtml hook
  • enforce の代わりに order を使ってください

また、少数のユーザーにのみ影響する破壊的変更が他にもあります。

• [#11101] feat(ssr)!: remove dedupe and mode support for CJS
  • SSR のデフォルトの ESM モードに移行する必要があります。CJS の SSR サポートは次の Vite メジャーで削除される可能性があります。
• [#10475] feat: handle static assets in case-sensitive manner
  • ファイル名の大文字小文字を無視する OS に依存しないようにしましょう。
• [#10996] fix!: make NODE_ENV more predictable
  • この変更に関する説明は PR を参照してください。
• [#10903] refactor(types)!: remove facade type files

v2 からの移行 #

Vite v3 ドキュメントの Migration from v2 Guide をまず確認し、アプリを Vite v3 に移植するための必要な変更を調べてから、このページの変更点を進めてください。