總覽

Vite（法語意為 "快速的"，發(fā)音 /vit/，發(fā)音同 "veet"）是一種新型前端構(gòu)建工具，能夠顯著提升前端開發(fā)體驗(yàn)。它主要由兩部分組成：

• 一個(gè)開發(fā)服務(wù)器，它基于 原生 ES 模塊 提供了 豐富的內(nèi)建功能，如速度快到驚人的 模塊熱更新（HMR）。
• 一套構(gòu)建指令，它使用 Rollup 打包你的代碼，并且它是預(yù)配置的，可輸出用于生產(chǎn)環(huán)境的高度優(yōu)化過的靜態(tài)資源。

Vite 意在提供開箱即用的配置，同時(shí)它的 插件 API 和 JavaScript API 帶來了高度的可擴(kuò)展性，并有完整的類型支持。

你可以在 為什么選 Vite 中了解更多關(guān)于項(xiàng)目的設(shè)計(jì)初衷。

瀏覽器支持

默認(rèn)的構(gòu)建目標(biāo)瀏覽器是能 在 script 標(biāo)簽上支持原生 ESM 和 原生 ESM 動(dòng)態(tài)導(dǎo)入。傳統(tǒng)瀏覽器可以通過官方插件 @vitejs/plugin-legacy 支持。

在線試用Vite

你可以通過 StackBlitz 在線試用 vite。它直接在瀏覽器中運(yùn)行基于 Vite 的構(gòu)建，因此它與本地開發(fā)幾乎無差別，同時(shí)無需在你的機(jī)器上安裝任何東西。你可以瀏覽 ?vite.new/{template} ?來選擇你要使用的框架。

目前支持的模板預(yù)設(shè)如下：

搭建第一個(gè)Vite項(xiàng)目

兼容性注意

Vite 需要 Node.js 版本 >= 12.0.0。

使用NPM：

$ npm init vite@latest

使用 Yarn：

$ yarn create vite

使用 PNPM：

$ pnpm create vite

然后按照提示操作即可！

你還可以通過附加的命令行選項(xiàng)直接指定項(xiàng)目名稱和你想要使用的模板。例如，要構(gòu)建一個(gè) Vite + Vue 項(xiàng)目，運(yùn)行:

# npm 6.x
npm init vite@latest my-vue-app --template vue

# npm 7+, 需要額外的雙橫線：
npm init vite@latest my-vue-app -- --template vue

# yarn
yarn create vite my-vue-app --template vue

# pnpm
pnpm create vite my-vue-app -- --template vue

查看 create-vite 以獲取每個(gè)模板的更多細(xì)節(jié)：?vanilla?，?vanilla-ts?，?vue?，?vue-ts?，?react?，?react-ts?，?preact?，?preact-ts?，?lit?，?lit-ts?，?svelte?，?svelte-ts?

社區(qū)模塊

create-vite 是一個(gè)快速生成主流框架基礎(chǔ)模板的工具。查看 Awesome Vite 倉庫的 社區(qū)維護(hù)模板，里面包含各種工具和不同框架的模板。你可以用如 degit 之類的工具，使用社區(qū)模版來搭建項(xiàng)目。

npx degit user/project my-project
cd my-project

npm install
npm run dev

如果該項(xiàng)目使用 ?main ?作為默認(rèn)分支, 需要在項(xiàng)目名后添加 ?#main?

npx degit user/project#main my-project

?index.html?與項(xiàng)目跟目錄

你可能已經(jīng)注意到，在一個(gè) Vite 項(xiàng)目中，?index.html? 在項(xiàng)目最外層而不是在 ?public ?文件夾內(nèi)。這是有意而為之的：在開發(fā)期間 Vite 是一個(gè)服務(wù)器，而 ?index.html? 是該 Vite 項(xiàng)目的入口文件。
Vite 將 ?index.html? 視為源碼和模塊圖的一部分。Vite 解析 ?<script type="module" src="...">? ，這個(gè)標(biāo)簽指向你的 JavaScript 源碼。甚至內(nèi)聯(lián)引入 JavaScript 的 ?<script type="module">? 和引用 CSS 的 ?<link href>? 也能利用 Vite 特有的功能被解析。另外，?index.html? 中的 URL 將被自動(dòng)轉(zhuǎn)換，因此不再需要 ?%PUBLIC_URL%? 占位符了。
與靜態(tài) HTTP 服務(wù)器類似，Vite 也有 “根目錄” 的概念，即服務(wù)文件的位置，在接下來的文檔中你將看到它會(huì)以 ?<root>? 代稱。源碼中的絕對(duì) URL 路徑將以項(xiàng)目的 “根” 作為基礎(chǔ)來解析，因此你可以像在普通的靜態(tài)文件服務(wù)器上一樣編寫代碼（并且功能更強(qiáng)大?。ite 還能夠處理依賴關(guān)系，解析處于根目錄外的文件位置，這使得它即使在基于 monorepo 的方案中也十分有用。
Vite 也支持多個(gè) ?.html? 作入口點(diǎn)的 多頁面應(yīng)用模式。

指定替代根目錄

?vite ?以當(dāng)前工作目錄作為根目錄啟動(dòng)開發(fā)服務(wù)器。你也可以通過 ?vite serve some/sub/dir? 來指定一個(gè)替代的根目錄。

命令行界面

在安裝了 Vite 的項(xiàng)目中，可以在 npm scripts 中使用 vite 可執(zhí)行文件，或者直接使用 npx vite 運(yùn)行它。下面是通過腳手架創(chuàng)建的 Vite 項(xiàng)目中默認(rèn)的 npm scripts：

{
  "scripts": {
    "dev": "vite", // 啟動(dòng)開發(fā)服務(wù)器，別名：`vite dev`，`vite serve`
    "build": "vite build", // 為生產(chǎn)環(huán)境構(gòu)建產(chǎn)物
    "preview": "vite preview" // 本地預(yù)覽生產(chǎn)構(gòu)建產(chǎn)物
  }
}

可以指定額外的命令行選項(xiàng)，如 --port 或 --https。運(yùn)行 npx vite --help 獲得完整的命令行選項(xiàng)列表。

使用未發(fā)布的功能

如果你迫不及待想要體驗(yàn)最新的功能，可以自行克隆 vite 倉庫 到本地機(jī)器上然后自行將其鏈接（將需要 pnpm）：

git clone https://github.com/vitejs/vite.git
cd vite
pnpm install
cd packages/vite
pnpm run build
pnpm link --global # you can use your preferred package manager for this step

然后，回到你的 Vite 項(xiàng)目并運(yùn)行 pnpm link --global vite（或者使用你的其他包管理工具來全局鏈接 vite）。重新啟動(dòng)開發(fā)服務(wù)器來體驗(yàn)新功能吧！