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 の主要機能の1つとして Vite のファーストクラスサポートを発表しました。Deno は現在 Vite をサポートしています。Vitest の採用が爆発的に伸びており、Vite の npm ダウンロードの半分を占めるようになるでしょう。Nx もエコシステムに投資しており、Vite を公式にサポートしています。
Vite と関連プロジェクトの成長を示すものとして、Vite エコシステムは10月11日に ViteConf 2022 に集結しました。主要なウェブフレームワークとツールの代表者たちが、イノベーションとコラボレーションの物語を語るのを目にしました。そして象徴的な動きとして、Rollup チームはちょうどその日に Rollup 3 をリリースしました。
今日、Vite の チーム はエコシステムパートナーの助けを借りて、ビルド時に Rollup 3 を搭載した Vite 4 のリリースを発表できることを嬉しく思います。私たちはエコシステムと協力し、この新しいメジャーバージョンへのスムーズなアップグレードパスを確保しました。Vite は現在 Rollup 3 を使用しており、これにより Vite の内部アセット処理が簡素化され、多くの改善がなされました。Rollup 3 のリリースノートはこちらでご覧いただけます。
クイックリンク
その他の言語のドキュメント
最近 Vite の使用を開始した場合は、Vite ガイドの理由を読み、Getting Started と Features ガイドを確認することをお勧めします。関与したい場合は、GitHub で貢献を歓迎します。Vite には、およそ 700人の協力者が貢献しています。Twitter と Mastodon で最新情報をフォローするか、Discord コミュニティで他の人と協力してください。
Vite 4 で遊び始めましょう
pnpm create vite を使用して、お好みのフレームワークで Vite プロジェクトをスキャフォールドするか、vite.new を使用して Vite 4 で遊べるスターターテンプレートをオンラインで開きます。
pnpm create vite-extra を実行して、他のフレームワークとランタイム (Solid、Deno、SSR、ライブラリスターター) のテンプレートにアクセスすることもできます。create vite を Others オプションで実行すると、create vite-extra テンプレートも利用できます。
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 を使用するプラグインで、小さなパッケージフットプリントと Babel 変換パイプラインを使用できる柔軟性を備え、高速な HMR を実現します。
@vitejs/plugin-react-swc (新規)
@vitejs/plugin-react-swc は、ビルド時に esbuild を使用し、開発時に Babel を SWC に置き換える新しいプラグインです。非標準の React 拡張を必要としない大規模プロジェクトの場合、コールドスタートと Hot Module Replacement (HMR) が大幅に高速化される可能性があります。
ブラウザの互換性
モダンブラウザのビルドは、より広範な ES2020 互換性のために、デフォルトで safari14 をターゲットにするようになりました。これは、モダンビルドが BigInt を使用でき、nullish coalescing operator がもうトランスパイルされないことを意味します。古いブラウザをサポートする必要がある場合は、通常通り @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 と比較して23%削減されました (14.1 MB vs 18.3 MB)。
Vite コアのアップグレード
Vite コアと 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。
vite-ecosystem-ci の改善点
vite-ecosystem-ci は、ほとんどの主要なダウンストリームプロジェクトの CI の状態に関するオンデマンドのステータスレポートを提供することで、Vite の CI を拡張します。私たちは週に3回、Vite のメインブランチに対して vite-ecosystem-ci を実行し、回帰を導入する前にタイムリーなレポートを受け取ります。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 のフルタイム勤務で雇用しています。
次のステップ
当面の焦点は、潜在的な退行による混乱を避けるために、新たに開かれた課題のトリアージにあります。Vite の改善に貢献したい場合は、課題のトリアージから始めることをお勧めします。Discord に参加し、#contributing チャンネルで連絡してください。私たちの #docs のストーリーを磨き、他の人を #help しましょう。Vite の採用が拡大し続ける中、次の波のユーザーのために、協力的で歓迎的なコミュニティを構築し続ける必要があります。
フレームワークを強化し、アプリを開発するために Vite を選択したすべての人々の DX を改善し続けるための多くのオープンな課題があります。前進しましょう！