最近我開始使用 Vite,它被譽為 “新一代的 create-react-app"。

那什麼是 Vite?

有時候這可能令人困惑,因為有很多工具都在以不同的方式做同樣的事情,比如 Parcel、esbuild、Rollup、Rome、webpack、Turbopack(對,我正在努力將它的大小寫寫對)… 我傾向於認為它們基本上是在做同樣的事情,儘管它們實際上並不相同。

但是當人們開始在很多地方使用 Vite,並且我在 Twitter 上不斷看到它的介紹時,我也變得很好奇。

我試用了一下,我喜歡它。

Vite自稱是“下一代的前端工具”。

它基本上就像一個模塊打包工具,例如 Webpack 或 Turbopack,但有趣的是它並不表現得像一個打包工具。它不像以前一樣創建一個JavaScript捆綁文件並將其發送到瀏覽器,通常是一個大的JavaScript文件,然後由瀏覽器進行處理。相反,Vite 使用本地瀏覽器的 ES 模塊支持直接將模塊發送到瀏覽器。

因此,如果你在開發者工具中檢查網站,你將看到所有應用程序文件都被發送到瀏覽器,而不是看到一個大的JavaScript文件。

我認為這是 Vite 速度的首要原因,這是構建工具行為上的根本改變。

以下是 Vite 提供的一些功能:

  • 用於許多熱門庫和框架(如 React)的脚手架工具
  • 具有熱模塊替換(HMR)的開發服務器
  • 用於創建代碼生產版本的構建工具

有趣的是,Vite 在內部使用 Rollup,所以它不是 Rollup 的替代品 - 它是在其上構建的。

它還使用了 SWC,它是下一代更快的 Babel。

基本上,你的應用程式代碼被編譯成單獨的 ES 模塊並發送到瀏覽器。有趣的是,Vite 不是一個捆綁工具。我們習慣於使用捆綁工具來創建我們代碼的最終版本,但 Vite 不這樣做。

相反,它“直接將每個模塊發送到瀏覽器。這意味著瀏覽器會處理模塊之間的依賴關係。” 這是我在Turbopack 比較頁面上找到的。

我覺得 Vite 非常用戶友好,這對其廣泛的應用起到了推動作用。

我最喜歡使用它的情況是初始化一個新的 JavaScript 或 React 應用程序。它也內置了對 Svelte、SvelteKit 和其他框架的集成。

你可以使用以下命令使用 Vite 初始化一個新項目:

npm create [[email protected]](/cdn-cgi/l/email-protection)

這將開始一個新的

給項目取個名字,它將用於作為資料夾名稱。

如果你輸入的名字不是一個有效的資料夾/包名(例如包含空格),它將提示輸入一個有效的資料夾/包名。

然後你可以選擇一個框架:

現在,根據你的選擇,你將有不同的選項:

例如,我想創建一個基本的原生 JavaScript 項目:

這是 Vite 創建的項目文件:

package.json 現在已配置使用 Vite 運行項目。但要注意,我們沒有 node_modules 文件夾。

在終端中,進入資料夾並運行 npm install

接下來,你可以運行 npm run dev,Vite 將運行起來:

這是一個快速啟動已配置使用 ES 模塊的 Web 服務器的方法。

選擇 React 也是一樣,Vite 會使用現代標準初始化一個簡單的 React 示例應用: