SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

CodeZineニュース

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

  • X ポスト
  • このエントリーをはてなブックマークに追加

  • X ポスト
  • このエントリーをはてなブックマークに追加

 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%小さくなっている。

関連リンク

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
この記事の著者

CodeZine編集部(コードジンヘンシュウブ)

CodeZineは、株式会社翔泳社が運営するソフトウェア開発者向けのWebメディアです。「デベロッパーの成長と課題解決に貢献するメディア」をコンセプトに、現場で役立つ最新情報を日々お届けします。

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/17058 2022/12/19 15:45

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング