Clever Geek Handbook

Vite2.0の発表

本日、Vite2.0の公式リリースを発表できることを嬉しく思います。





Vite（フランス語で「高速」と発音/vit/



（「vit」））は、Web開発用の新しい種類のビルドツールです。事前構成された開発サーバー+コレクターを考えてみてください。ただし、より小さく、より高速です。ブラウザで構築されたESモジュールのサポートとesbuildなどのツールを使用して、高速で最新の開発エクスペリエンスを実現します。





Viteの速度を理解するために、Viteとcreate-react-app



（CRA）を使用してRepl.itにReactアプリをアップロードすることを比較したビデオを次に示します。





Viteのことを聞いたことがなく、それについてもっと知りたい場合は、このプロジェクトの背後にある理論的根拠を確認してください。Viteが他の同様のツールとどのように異なるのか疑問に思っている場合は、比較を確認してください。





バージョン2.0の新機能

バージョン1.0がRCを離れる前に内部を完全に再編成することを決定したので、これは実際にはViteの最初の安定バージョンです。ただし、Vite 2.0には、以前のバージョンに比べて多くの重要な改善があります。





フレームワークの不可知論的なコア

Vite , Vue ESM. Vite 1 HMR .





Vite 2.0 , , . , . Vue, React, Preact, Lit Element Svelte .





( Awesome Vite - . .)





API

WMR, Rollup Rollup . , Rollup, , Vite, Vite (, HMR).





API , / , Vite.





esbuild

Vite ESM, , CommonJS ESM. Vite Rollup, 2.0 esbuild, 10-100- . , , React Meterial UI, 28 Macbook Pro M1, ~1,5 . , .





CSS

Vite CSS :





  1. : @import



    url()



    CSS Vite npm.





  2. URL: url()



    , .





  3. CSS : JS CSS, JS .





Server-Side Rendering (SSR) Support

Vite 2.0 SSR. Vite API- ESM Node.js ( HMR ) CommonJS SSR. Vite, / SSG.





Vite SSR , , .





Vite ESM, @vitejs/plugin-legacy. modern/legacy , .





!

, Vite ! Vite , (, Node.js> = 12):





npm init @vitejs/app

次に、ガイドをチェックして、Viteが箱から出して提供するものを確認してください。また、GitHubでソースコードを確認したり、Twitterで更新をフォローしたり、Discordチャットサーバーで他のViteユーザーとのディスカッションに参加したりすることもできます。







More articles:


All Articles