Vite.js 是現(xiàn)代 Web 項目的快速開發(fā)工具。它通過改善開發(fā)體驗來關(guān)注速度和性能。

Vite 使用原生瀏覽器 ES 導(dǎo)入來支持現(xiàn)代瀏覽器，無需構(gòu)建過程。

Vite 由兩個主要部分組成：

• 開發(fā)服務(wù)器提供熱模塊替換（HMR）的支持，用于在應(yīng)用程序執(zhí)行期間更新模塊。當對應(yīng)用程序的源代碼進行更改時，僅更新更改，而不是重新加載整個應(yīng)用程序。此功能有助于加快開發(fā)時間。
• 構(gòu)建命令使開發(fā)人員能夠?qū)⑵浯a與 Rollup 捆綁在一起，并預(yù)先配置為輸出高度優(yōu)化的靜態(tài)資源以用于生產(chǎn)。

如何使用 Vite。 js 可以工作

ES2015 年引入 ES 模塊時，許多瀏覽器對 ES6 模塊的支持很差。為了解決這個問題，現(xiàn)代瀏覽器現(xiàn)在支持原生 ES 模塊。這允許開發(fā)者本地使用導(dǎo)入和導(dǎo)出語句。

在原生 ES 中，導(dǎo)入必須獲取相對或絕對 URL，因為它不支持裸模塊導(dǎo)入，例如：

import?{?someMethod?}?from?'my-dep'

上面的代碼會在瀏覽器中拋出錯誤，因為很多瀏覽器不支持ES6模塊。那么現(xiàn)在的問題是 Vite 如何處理這個問題？

Vite 會自動檢測源文件中的裸模塊導(dǎo)入，并對其執(zhí)行以下兩個操作：

• Vite 會預(yù)先-捆綁源文件以加快頁面加載速度，并將 CommonJS / UMD 模塊轉(zhuǎn)換為 ESM。
• 為了讓瀏覽器導(dǎo)入模塊而不拋出錯誤，Vite 會將導(dǎo)入重寫為有效的 URL，如下所示

/node_modules/.vite/my-dep.js?v=f3sf2ebb

為什么使用 Vite？

既然我們知道了 Vite 是什么以及它是如何工作的，您可能想知道為什么要使用 Vite。

有很多原因你應(yīng)該在你的項目中使用 Vite。讓我們簡單看一下其中的一些。

性能

與 Vite 的 ESbuild 預(yù)捆綁使其比使用任何其他 JS 捆綁器快 10 到 100 倍。這是因為它有助于提高頁面速度，并將 CommonJS / UMD 模塊轉(zhuǎn)換為 ESM。

根據(jù) Vite 文檔，

“預(yù)捆綁步驟是使用 esbuild 執(zhí)行的，使得Vite 的冷啟動時間明顯快于任何基于 JavaScript 的捆綁器?！?/p>

熱模塊替換 (HMR)

Vite 使用 HMR 功能來跟蹤應(yīng)用程序中的更改，而無需重新加載整頁。使用 HMR API，瀏覽器將僅加載頁面的修改部分，并且仍然保留應(yīng)用程序的狀態(tài)。

無需在應(yīng)用程序中手動配置 HMR API。它會在應(yīng)用程序安裝過程中自動添加到您的項目中。

借助 HMR 性能，無論模塊數(shù)量或應(yīng)用程序大小如何，您都可以設(shè)計更輕、更快的應(yīng)用程序。

配置選項

Vite 允許您通過使用 vite.config.js 或 vite.config.ts 擴展默認配置來更好地控制項目的配置。它們位于項目的基本根目錄中。

您還可以使用 --config CLI 選項指定不同的配置文件，如下所示：

vite?--config?my-config.js

您需要什么

您的計算機上必須安裝以下軟件才能創(chuàng)建 Vite 項目：

• Node.js 版本 12.2.0 或更高版本（檢查您是否安裝了 Node）您的計算機在終端上運行node -v）
• Npm?/?Yarn

在計算機上安裝這些后，您現(xiàn)在可以創(chuàng)建一個 Vite 項目。

如何創(chuàng)建 Vite 項目

要創(chuàng)建 Vite 應(yīng)用程序，請打開終端并導(dǎo)航到要保存 Vite 程序的文件夾。然后運行以下命令：

npm?create?@vitejs/app?my-vite-app

注意：my_vite_app 是我們要創(chuàng)建的 Vite 應(yīng)用程序的名稱。您可以將其更改為您喜歡的任何名稱。

運行上述命令后，系統(tǒng)會提示您選擇框架和模板（變體）。就本教程而言，我們將使用 React，但您可以選擇您熟悉的任何框架和模板。

接下來，運行以下命令來完成安裝：

cd?vite_applicationnpm?install

安裝可能需要幾分鐘，所以只需等待它完成即可。

如何運行 Vite 應(yīng)用程序

要在終端上運行 Vite 應(yīng)用程序，請導(dǎo)航到應(yīng)用程序文件夾 (vite_application)，然后運行下面的 dev 命令來啟動開發(fā)服務(wù)器：

npm?run?dev

運行上述命令將啟動開發(fā)服務(wù)器。然后打開終端并輸入 http://localhost:3000。

您應(yīng)該在瀏覽器中看到類似以下內(nèi)容：

React 應(yīng)用程序

Vite 文件夾結(jié)構(gòu)

我們來看看Vite應(yīng)用文件夾是如何組織的。我們還將詳細查看一些文件夾和文件。

注意：如果您使用不同的框架和模板，文件名將不同。

Vite 文件夾結(jié)構(gòu)

node_modules 文件夾

node_modules 文件夾包含應(yīng)用程序所需的所有依賴項，這些依賴項在 package.json 文件中指定。

運行 npm install 命令后，package.json 中配置的所有依賴項都會下載到 node_modules 文件夾中。

將源代碼推送到 GitHub 時，不需要推送 node_modules文件夾，因為用戶可以通過 package.json 安裝應(yīng)用程序中使用的所有必需依賴項。

您可以在應(yīng)用程序父級的根目錄中找到 package.json 文件。

src 文件夾

src文件夾是我們開發(fā)Vite應(yīng)用時交互最多的文件夾之一。該文件夾包含app.jsx、main.jsx、app.css和index.js。

您應(yīng)用程序的所有資產(chǎn)，例如圖像、視頻和其他文件，都必須存儲在src文件夾中，因為Vite自動對 index.html 中的所有 URL 進行變基。

App.jsx 和 main.jsx

app.jsx 文件是基本組件，用作容器中使用的所有其他組件應(yīng)用程序。

main.jsx 文件是您從 index.html 定位根 id 并渲染應(yīng)用程序中使用的所有組件的位置。

index.css 和 app.css

這些文件包含程序中使用的所有 CSS 樣式。您可以添加自己的 CSS 文件或更改樣式。

以上是Vite.js 教程 – 如何在 Web 項目中安裝和使用 Vite的詳細內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！