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
は p
が既に定義されている場合は上書きしないようになりました。そのため、ビルド前に p
' を設定した場合、開発用のビルドも行われるようになります。これにより、複数のビルドや開発用サーバを並行して動作させる際に、よりコントロールしやすくなります。
詳しくは、更新された 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
hookenforce
の代わりに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 に移植するための必要な変更を調べてから、このページの変更点を進めてください。