Vite.js 是現(xiàn)代 Web 專(zhuān)案的快速開(kāi)發(fā)工具。它透過(guò)改善開(kāi)發(fā)體驗(yàn)來(lái)關(guān)注速度和效能。

Vite 使用原生瀏覽器 ES 匯入來(lái)支援現(xiàn)代瀏覽器，無(wú)需建置流程。

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

• 開(kāi)發(fā)伺服器提供熱模組替換（HMR）的支援，用於在應(yīng)用程式執(zhí)行期間??更新模組。當(dāng)對(duì)應(yīng)用程式的原始程式碼進(jìn)行更改時(shí)，僅更新更改，而不是重新載入整個(gè)應(yīng)用程式。此功能有助於加快開(kāi)發(fā)時(shí)間。
• 建置命令使開(kāi)發(fā)人員能夠?qū)⑵涑淌酱a與 Rollup 捆綁在一起，並預(yù)先配置為輸出高度最佳化的靜態(tài)資源以用於生產(chǎn)。

如何使用 Vite。 js 可以工作

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

在原生ES 中，導(dǎo)入必須取得相對(duì)或絕對(duì)URL，因?yàn)樗恢г隳＝M導(dǎo)入，例如：

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

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

Vite 會(huì)自動(dòng)偵測(cè)原始檔案中的裸模組匯入，並對(duì)其執(zhí)行以下兩個(gè)動(dòng)作：

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

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

為什麼使用 Vite？

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

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

效能

與 Vite 的 ESbuild 預(yù)先捆綁使其比使用任何其他 JS 捆綁器快 10 到 100 倍。這是因?yàn)樗兄短岣唔?yè)面速度，並將 CommonJS / UMD 模組轉(zhuǎn)換為 ESM。

根據(jù)Vite 文檔，

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

熱模組替換(HMR)

Vite 使用HMR 功能來(lái)追蹤應(yīng)用程式中的更改，而無(wú)需重新載入整頁(yè)。使用 HMR API，瀏覽器將僅載入頁(yè)面的修改部分，並且仍然保留應(yīng)用程式的狀態(tài)。

無(wú)需在應(yīng)用程式中手動(dòng)設(shè)定 HMR API。它會(huì)在應(yīng)用程式安裝過(guò)程中自動(dòng)添加到您的專(zhuān)案中。

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

設(shè)定選項(xiàng)

Vite 讓您透過(guò)使用 vite.config.js 或 vite.config.ts 擴(kuò)充預(yù)設(shè)設(shè)定來(lái)更好地控制專(zhuān)案的設(shè)定。它們位於專(zhuān)案的基本根目錄中。

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

vite?--config?my-config.js

您需要什麼

您的電腦上必須安裝以下軟體才能建立Vite 專(zhuān)案：

• Node.js 版本12.2.0 或更高版本（檢查您是否安裝了Node）您的電腦在終端機(jī)上執(zhí)行node -v）
• Npm?/?Yarn

在電腦上安裝這些後，您現(xiàn)在可以建立一個(gè)Vite 專(zhuān)案。

如何建立 Vite 專(zhuān)案

要建立 Vite 應(yīng)用程序，請(qǐng)開(kāi)啟終端並導(dǎo)航到要儲(chǔ)存 Vite 程式的資料夾。然後執(zhí)行以下命令：

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

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

執(zhí)行上述指令後，系統(tǒng)會(huì)提示您選擇框架和範(fàn)本（變體）。就本教學(xué)而言，我們將使用 React，但您可以選擇您熟悉的任何框架和模板。

Next, run the following commands to finish the installation:

cd?vite_applicationnpm?install

The installation may take a few minutes, so just wait until it's completed.

How to Run a Vite Application

To run your Vite application on the terminal, navigate to the application folder (vite_application) and then run the dev command below to start the development server:

npm?run?dev

Running the above command will start the development server. Then open your terminal and enter?http://localhost:3000.

You should see something like this in the browser:

React application

Vite Folder Structure

Let's have a look at how Vite application folders are organized. We'll also look at a few of the folders and files in detail.

Note: if you are using a different framework and template, the file name will not be the same.

Vite folder structure

node_modules folder

The node_modules folder contains all the necessary dependencies for the application, which are specified in the package.json file.

All of the configured dependencies in package.json will be downloaded into the node_modules folder once the?npm install?command is run.

When pushing your source code to GitHub, you don't need to push the node_modules folder because users can install all the necessary dependencies used in your application through the package.json.

You can find the package.json file in the application parent's root directory.

src folder

The src folder is one of the folder that we interact with most when developing Vite applications. This folder contains app.jsx, main.jsx, app.css and index.js.

All of your application's assets, such as images, videos, and other files, must be stored in the src folder because Vite automatically rebases all URLs inside index.html.

App.jsx and main.jsx

The app.jsx file is the base component that serves as a container for all of the other components used in the application.

The main.jsx file is where you target the root id from the index.html and render all the components used in the application.

index.css and app.css

These files contain all of the CSS styles used in the program. You can add your own CSS file or change the style.

以上是Vite.js 教學(xué) – 如何在 Web 專(zhuān)案中安裝和使用 Vite的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！