Vite 4.0 がリリースされました！
2022年12月9日 - Vite 5.0 の発表をご覧ください。
Vite 3 は5ヶ月前にリリースされました。それ以来、npm の週間ダウンロード数は100万件から250万件に増加しました。エコシステムも成熟し、成長を続けています。今年のJamstack Conf のアンケートでは、コミュニティでの利用率は14%から32%に跳ね上がり、満足度スコアは9.7と高いままでした。Astro 1.0、Nuxt 3、その他の Vite を利用したフレームワークである、SvelteKit、Solid Start、Qwik City の安定版リリースがありました。Storybook は、Storybook 7.0 の主要機能の一つとして、Vite のファーストクラスサポートを発表しました。Deno は現在 Vite をサポートしています。Vitest の採用が爆発的に増加しており、まもなく Vite の npm ダウンロード数の半分を占めるでしょう。Nx もエコシステムに投資しており、Vite を公式にサポートしています。
Vite と関連プロジェクトが経験した成長を示す例として、Vite エコシステムは10月11日に ViteConf 2022 に集まりました。主要な Web フレームワークとツールの代表者たちが、革新と協力に関するストーリーを語りました。象徴的な動きとして、Rollup チームはまさにその日に Rollup 3 をリリースしました。
本日、Vite チームは、エコシステムパートナーの助けを借りて、ビルド時に Rollup 3 を搭載した Vite 4 のリリースを発表できることを嬉しく思います。この新しいメジャーバージョンへのスムーズなアップグレードパスを確保するために、エコシステムと協力してきました。Vite は現在、Rollup 3 を使用しており、これにより Vite の内部アセット処理を簡素化し、多くの改善を行うことができました。詳細については、Rollup 3 のリリースノートはこちらをご覧ください。
クイックリンク
他の言語のドキュメント
最近 Vite を使い始めた場合は、Vite を選ぶ理由ガイドを読み、はじめにと機能ガイドを確認することをお勧めします。参加したい場合は、GitHub で貢献を歓迎しています。ほぼ700 人の協力者が Vite に貢献しています。Twitter と Mastodon での最新情報をフォローするか、Discord コミュニティで他のユーザーとコラボレーションしてください。
Vite 4 を使ってみましょう
pnpm create vite を使用して、好みのフレームワークで Vite プロジェクトをスキャフォールドするか、vite.new を使用して Vite 4 を試すための開始テンプレートをオンラインで開きます。
pnpm create vite-extra を実行して、他のフレームワークやランタイム (Solid、Deno、SSR、ライブラリスターター) のテンプレートにアクセスすることもできます。create vite-extra テンプレートは、create vite を実行するときに Others オプションの下でも利用できます。
Vite スターターテンプレートは、さまざまなフレームワークで Vite をテストするためのプレイグラウンドとして使用されることを目的としていることに注意してください。次のプロジェクトを構築する際には、各フレームワークで推奨されているスターターに連絡することをお勧めします。一部のフレームワークでは、create vite でスターター (Vue の場合は create-vue と Nuxt 3、Svelte の場合は SvelteKit) にリダイレクトするようになりました。
開発中に SWC を使用する新しい React プラグイン
SWC は、特に React プロジェクトのコンテキストにおいて、Babel の成熟した代替手段になりました。SWC の React Fast Refresh の実装は Babel よりもはるかに高速であり、一部のプロジェクトでは、より良い代替手段となっています。Vite 4 からは、異なるトレードオフを持つ React プロジェクトで使用できる 2 つのプラグインがあります。現時点では両方のアプローチをサポートする価値があると信じており、今後も両方のプラグインの改善を検討していきます。
@vitejs/plugin-react
@vitejs/plugin-react は esbuild と Babel を使用するプラグインで、パッケージのフットプリントを小さく保ちながら高速な HMR を実現し、Babel 変換パイプラインを使用できる柔軟性も備えています。
@vitejs/plugin-react-swc (新規)
@vitejs/plugin-react-swc は、ビルド中に esbuild を使用しますが、開発中は Babel を SWC に置き換える新しいプラグインです。標準外の React 拡張機能を必要としない大規模なプロジェクトの場合、コールドスタートとホットモジュールリプレースメント (HMR) が大幅に高速になる可能性があります。
ブラウザ互換性
モダンブラウザビルドでは、ES2020 との互換性を広げるために、デフォルトで safari14 をターゲットとするようになりました。これは、モダンビルドで BigInt を使用できることと、nullish 合体演算子がトランスパイルされなくなったことを意味します。古いブラウザをサポートする必要がある場合は、通常どおり @vitejs/plugin-legacy を追加できます。
CSS を文字列としてインポートする
Vite 3 では、.css ファイルのデフォルトエクスポートをインポートすると、CSS の二重読み込みが発生する可能性がありました。
import cssString from './global.css'この二重読み込みは、.css ファイルがエミットされ、CSS 文字列がアプリケーションコードによっても使用される可能性があるため発生する可能性がありました。たとえば、フレームワークランタイムによって挿入されます。Vite 4 から、.css デフォルトエクスポートは 非推奨になりました。この場合は、インポートされた .css スタイルをエミットしない ?inline クエリサフィックス修飾子を使用する必要があります。
import stuff from './global.css?inline'詳細については、移行ガイドを参照してください。
環境変数
Vite は、dotenv 16 と dotenv-expand 9 (以前は dotenv 14 と dotenv-expand 5) を使用するようになりました。# または ` を含む値がある場合は、引用符で囲む必要があります。
-VITE_APP=ab#cd`ef
+VITE_APP="ab#cd`ef"詳細については、dotenv と dotenv-expand の変更履歴を参照してください。
その他の機能
- CLI ショートカット (開発中に
hを押すとすべて表示されます) (#11228) - 依存関係をプリバンドルする際の patch-package のサポート (#10286)
- よりクリーンなビルドログ出力 (#10895) と、ブラウザ開発ツールと一致するように
kBに切り替え (#10982) - SSR 中の改善されたエラーメッセージ (#11156)
パッケージサイズの削減
Vite は、特にドキュメントや再現のためのプレイグラウンドの使用事例において、インストールの高速化のためにフットプリントを重視しています。そして今回も、このメジャーバージョンでは Vite のパッケージサイズが改善されています。Vite 4 のインストールサイズは、vite 3.2.5 (14.1 MB 対 18.3 MB) と比較して 23% 小さくなっています。
Vite Core のアップグレード
Vite Core と vite-ecosystem-ci は、メンテナーと協力者に優れたエクスペリエンスを提供し、Vite の開発がエコシステムの成長に対応できるように進化を続けています。
コアから外れたフレームワークプラグイン
@vitejs/plugin-vue と @vitejs/plugin-react は、Vite の初期バージョンから Vite コアのモノリポジトリの一部でした。これにより、コアとプラグインの両方をまとめてテストおよびリリースすることで、変更を行う際に密なフィードバックループを得ることができました。vite-ecosystem-ci によって、独立したリポジトリで開発されたこれらのプラグインでもこのフィードバックを得ることができるようになったため、Vite 4 からは、それらは Vite コアのモノリポジトリから移動しました。これは、Vite のフレームワークに依存しないストーリーにとって重要なことであり、各プラグインを維持するための独立したチームを構築できるようになります。バグを報告したり、機能のリクエストを行う場合は、今後は新しいリポジトリである vitejs/vite-plugin-vue と vitejs/vite-plugin-react に issue を作成してください。
vite-ecosystem-ci の改善
vite-ecosystem-ci は、ほとんどの主要なダウンストリームプロジェクトのCIの状態に関するオンデマンドのステータスレポートを提供することで、ViteのCIを拡張します。vite-ecosystem-ci は、Vite のメインブランチに対して週に3回実行され、リグレッションを導入する前にタイムリーなレポートを受け取ります。Vite 4 は、Vite を使用するほとんどのプロジェクトとすぐに互換性を持つようになります。すでに必要な変更を加えたブランチが用意されており、今後数日以内にリリースされます。また、コメントで /ecosystem-ci run を使用して、PR でオンデマンドで vite-ecosystem-ci を実行することもでき、変更の影響 をメインに適用する前に知ることができます。
謝辞
Vite 4 は、Vite の貢献者、その多くはダウンストリームプロジェクトとプラグインのメンテナ、そして Vite チーム の努力による、数え切れないほどの時間なしには実現できませんでした。私たち全員が協力して、Vite を使用するすべてのフレームワークとアプリに対して、Vite の DX をさらに改善しました。このような活気のあるエコシステムの共通基盤を改善できることを感謝しています。
また、Vite チームをスポンサーしてくださる個人および企業、そして Vite の将来に直接投資してくださる企業にも感謝しています: @antfu7 の Vite とエコシステムに関する仕事は Nuxt Labs での仕事の一部であり、Astro は @bluwyoo の Vite コアの作業を資金提供しており、StackBlitz は @patak_dev を Vite にフルタイムで取り組むために雇用しています。
次のステップ
当面の焦点は、発生しうるリグレッションによる混乱を避けるために、新たにオープンされた issue のトリアージにあります。Vite の改善に参加して協力したい場合は、issue のトリアージから始めることをお勧めします。Discord に参加して、#contributing チャンネルでお声掛けください。#docs ストーリーを磨き、#help で他の人を助けてください。Vite の採用が成長を続けるにつれて、次世代のユーザーにとって役立ち、歓迎されるコミュニティを構築し続ける必要があります。
フレームワークを強化し、アプリを開発するために Vite を選択したすべての人の DX を改善するための多くのオープンな課題があります。前進しましょう！