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

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

Vite 由兩個(gè)主要部分組成：

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

如何使用 Vite。 js 可以工作

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

在原生 ES 中，導(dǎo)入必須獲取相對(duì)或絕對(duì) URL，因?yàn)樗恢С致隳K導(dǎo)入，例如：

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

上面的代碼會(huì)在瀏覽器中拋出錯(cuò)誤，因?yàn)楹芏酁g覽器不支持ES6模塊。那么現(xiàn)在的問題是 Vite 如何處理這個(gè)問題？

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

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

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

為什么使用 Vite？

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

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

性能

與 Vite 的 ESbuild 預(yù)捆綁使其比使用任何其他 JS 捆綁器快 10 到 100 倍。這是因?yàn)樗兄谔岣唔撁嫠俣龋?CommonJS / UMD 模塊轉(zhuǎn)換為 ESM。

根據(jù) Vite 文檔，

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

熱模塊替換 (HMR)

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

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

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

配置選項(xiàng)

Vite 允許您通過使用 vite.config.js 或 vite.config.ts 擴(kuò)展默認(rèn)配置來更好地控制項(xiàng)目的配置。它們位于項(xiàng)目的基本根目錄中。

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

vite?--config?my-config.js

您需要什么

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

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

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

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

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

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

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

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

接下來，運(yùn)行以下命令來完成安裝：

cd?vite_applicationnpm?install

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

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

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

npm?run?dev

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

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

React 應(yīng)用程序

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

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

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

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

node_modules 文件夾

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

運(yùn)行 npm install 命令后，package.json 中配置的所有依賴項(xiàng)都會(huì)下載到 node_modules 文件夾中。

將源代碼推送到 GitHub 時(shí)，不需要推送 node_modules文件夾，因?yàn)橛脩艨梢酝ㄟ^ package.json 安裝應(yīng)用程序中使用的所有必需依賴項(xiàng)。

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

src 文件夾

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

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

App.jsx 和 main.jsx

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

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

index.css 和 app.css

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

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