Vite 教程 | Tech Wiki Online

Vite 教程

最近我開始使用 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 示例應用：