Vite 開始

總覽

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

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

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

你可以在 為什么選 Vite 中了解更多關于項目的設計初衷。

瀏覽器支持

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

在線試用Vite

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

目前支持的模板預設如下：

搭建第一個Vite項目

兼容性注意

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

使用NPM：

$ npm init vite@latest

使用 Yarn：

$ yarn create vite

使用 PNPM：

$ pnpm create vite

然后按照提示操作即可！

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

# 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 以獲取每個模板的更多細節(jié)：?vanilla?，?vanilla-ts?，?vue?，?vue-ts?，?react?，?react-ts?，?preact?，?preact-ts?，?lit?，?lit-ts?，?svelte?，?svelte-ts?

社區(qū)模塊

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

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

npm install
npm run dev

如果該項目使用 ?main ?作為默認分支, 需要在項目名后添加 ?#main?

npx degit user/project#main my-project

?index.html?與項目跟目錄

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

指定替代根目錄

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

命令行界面

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

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

可以指定額外的命令行選項，如 --port 或 --https。運行 npx vite --help 獲得完整的命令行選項列表。

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

如果你迫不及待想要體驗最新的功能，可以自行克隆 vite 倉庫 到本地機器上然后自行將其鏈接（將需要 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 項目并運行 pnpm link --global vite（或者使用你的其他包管理工具來全局鏈接 vite）。重新啟動開發(fā)服務器來體驗新功能吧！