フロントエンドのビルドツール「Vite 4.0」がリリース

　Vue.jsやReactなどに対応したフロントエンドのビルドツールであるViteの開発チームは、最新バージョンとなる「Vite 4.0」をリリースしている。

　「Vite 4.0」では、Reactプロジェクトのコンテキストとして、従来使用されていたBabelとともに、React Fast Refresh実装によって非常に高速なSWCの、両方を利用可能となっている。開発チームは、現時点ではBabelとSWCどちらのアプローチもサポートする価値があるとしており、今後も両方のプラグイン改善を検討していくという。

　従来の@vitejs/plugin-reactは、esbuildとBabelを使用するプラグインであり、パッケージフットプリントが小さく、高速なHMRを実現し、Babel変換パイプラインを使用できる。

　今回、新たに追加された@vitejs/plugin-react-swcは、ビルド時にesbuildを使用するプラグインではあるものの、開発時にはBabelをSWCに置き換える。非標準のReact拡張機能を必要としない大規模なプロジェクトでは、HMRが大幅に高速化される。

　モダンブラウザのビルドターゲットは、より広範なES2020との互換性を有するsafari14であり、ビルドでBigIntが利用可能になるとともに、null合体演算子がトランスコンパイルされなくなった。なお、古いブラウザのサポートが必要な場合は、@vitejs/plugin-legacyを追加することで対応できる。

　以前のバージョンであるVite 3では、.cssファイルのデフォルトエクスポートをインポートすると、CSSが二重に読み込まれる可能性があった。しかし、Vite 4以降は.cssのデフォルトエクスポートが非推奨となり、代わりに?inlineクエリサフィックス修飾子を使用する必要がある。

　環境変数は、従来のdotenv 14とdotenv-expand 5に変わって、dotenv 16とdotenv-expand 9を使用するようになった。なお、「#」または「`」を含む値がある場合は、それらを引用符で囲む必要がある。

　そのほか、CLIショートカット、依存関係を事前にバンドルする際のパッチパッケージのサポート、よりクリーンなビルドログ出力、ブラウザ開発ツールに合わせたkBの切り替え、SSR中のエラーメッセージの改善などが行われた。

　Viteは、とりわけドキュメンテーションと複製のためのプレイグラウンドとしての用途において、インストールを高速化すべくフットプリントに配慮しており、Vite 4のインストールサイズはVite 3.2.5と比較して23％小さくなっている。