Vue的新型前端構(gòu)建工具Vite怎么用

本文小編為大家詳細(xì)介紹“Vue的新型前端構(gòu)建工具Vite怎么用”，內(nèi)容詳細(xì)，步驟清晰，細(xì)節(jié)處理妥當(dāng)，希望這篇“Vue的新型前端構(gòu)建工具Vite怎么用”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來(lái)學(xué)習(xí)新知識(shí)吧。

從 Vite 開(kāi)始

先來(lái)看看 Vite 的官方介紹吧。

可以看出，在本地開(kāi)發(fā)時(shí)，Vite 使用了 原生 ES 模塊：現(xiàn)代瀏覽器（比如最新版谷歌）已經(jīng)不需要依賴 webpack 管理包模塊，而是可以和 Nodejs 一樣具有模塊管理能力，這就是 原生 ES 模塊 能力。

所以，在本地開(kāi)發(fā)時(shí)，Vite 省略了一些耗時(shí)的編譯過(guò)程，熱更新自然快。

在構(gòu)建生產(chǎn)產(chǎn)物時(shí)，可以構(gòu)建現(xiàn)代瀏覽器產(chǎn)物，也可以通過(guò) Rollup 輸出生產(chǎn)環(huán)境的高度優(yōu)化過(guò)的靜態(tài)資源。—— 這個(gè)高度優(yōu)化到什么程度，我們可以在后面的文章里去探討一下。

上手

Vite 的上手使用很簡(jiǎn)單，直接運(yùn)行 npm create vite@latest 命令即可。

npm create 其實(shí)就是 npm init 命令，而 npm init 命令帶上包名執(zhí)行的就是 npm exec，也就是執(zhí)行 vite 包的默認(rèn)命令 —— 初始化。

輸入命令后，需要添加項(xiàng)目名稱和技術(shù)棧，可以看到可供選擇的技術(shù)棧有這么幾種（如下圖）

vite 支持的框架有 6 種，有一半我都不認(rèn)識(shí)。

• vanilla：Vanilla JS 是一個(gè)快速、輕量級(jí)、跨平臺(tái)的JavaScript框架。Vanilla JS 是世界上最輕量的JavaScript框架（沒(méi)有之一） —— 其實(shí)這玩意就是原生 JS。

• vue/react：這兩個(gè)應(yīng)該不用過(guò)多介紹了吧。

• preact：React 的輕量級(jí)替代方案。

• lit：Lit 是一個(gè)簡(jiǎn)單的庫(kù)，用于構(gòu)建快速、輕量級(jí)的 Web 組件。（看了一眼語(yǔ)法，感覺(jué)還挺好玩的。）

• svelte：一個(gè)不使用 Virtual DOM 的庫(kù) —— 真酷。這個(gè)庫(kù)的作者和 Rollup 的作者是同一人。

這里我選了 vue + ts 進(jìn)行創(chuàng)建。

現(xiàn)在來(lái)看看，這個(gè)新建的項(xiàng)目目錄長(zhǎng)啥樣吧。（如下圖）

和用 vue-cli 初始化的目錄有兩處不同：

• index.html 入口文件被移到了根目錄下。官方解釋是：在開(kāi)發(fā)期間 Vite 是一個(gè)服務(wù)器，而 index.html 是該 Vite 項(xiàng)目的入口文件。

• vite.config.ts 替代了 vue.config.js，作為 vite 項(xiàng)目的配置文件。

接下來(lái)，我們看看 package.json 的內(nèi)容吧。（如下）

{
  "name": "vite-try",
  "version": "0.0.0",
  "scripts": {
    "dev": "vite",
    "build": "vue-tsc --noEmit && vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "vue": "^3.2.25"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^2.0.0",
    "typescript": "^4.4.4",
    "vite": "^2.7.2",
    "vue-tsc": "^0.29.8"
  }
}

從上面可以看出，使用 Vite 初始化的 Vue 項(xiàng)目，Vue 的版本已經(jīng)是最新的 Vue3 了。而開(kāi)發(fā)時(shí)依賴也從 vue-cli/webpack 系列切換到了 vite 系列。

啟動(dòng)項(xiàng)目

在體驗(yàn) Vue3 新語(yǔ)法之前，先把項(xiàng)目啟動(dòng)，看看效果吧。

在使用 npm i 安裝完依賴后，使用 npm run dev 即可啟動(dòng) 本地開(kāi)發(fā) 模式了。

剛運(yùn)行項(xiàng)目，啟動(dòng)速度著實(shí)讓我吃了一驚。

這比 Vue2 初始化的項(xiàng)目啟動(dòng)也快太多了，剛一眨眼項(xiàng)目就已經(jīng)啟動(dòng)了。

當(dāng)然，我們從它的介紹可以得知，這是因?yàn)樵诒镜亻_(kāi)發(fā)時(shí)，Vite 使用了 原生 ES 模塊，所以期間沒(méi)有涉及模塊編譯過(guò)程，節(jié)約了不少時(shí)間。

查看本地運(yùn)行的模塊

我們打開(kāi)控制臺(tái)，先看看我們的 html 文件。（如下圖）

從上午可以看出，html 中引入了 main.ts，也就是我們這個(gè)項(xiàng)目的入口文件。（如下圖）

從上面這張圖可以看出，代碼還是原生的 import，沒(méi)有經(jīng)過(guò)任何轉(zhuǎn)譯。

但是，在這里我看到請(qǐng)求的資源，有 ts 還有 vue。

難道谷歌瀏覽器已經(jīng)支持直接加載 ts 和 vue 文件了嗎？其實(shí)并不是，這里的奧妙之處來(lái)自于文件的響應(yīng)頭 —— Content-Type，這決定了瀏覽器以什么樣的方式處理該文件。（如下圖）

如果你點(diǎn)開(kāi)其他 .vue 文件可以看出，.vue 文件還是經(jīng)過(guò)編譯，成為了可供瀏覽器識(shí)別的 js 類型，但模塊還是使用了谷歌瀏覽器支持的 原生 ES 模塊。（如下圖）

我們來(lái)看看頁(yè)面長(zhǎng)啥樣吧。（如下圖）

emmmmm，經(jīng)典的 Vue 啟動(dòng)頁(yè)。

上圖的兩行話引起了我的注意：

• 推薦使用的 IDE 是 vscode + volar。

• 修改 components/HelloWorld.vue 來(lái)測(cè)試本地?zé)岣鹿δ堋?/p>

vscode + volar

vscode 是我一直用于寫 vue 的代碼編輯器，可 volar 是啥呢？

查了一下，原來(lái)是 vscode 中用于支持 vue3 語(yǔ)法的一個(gè)插件，可以用于智能語(yǔ)法提示和錯(cuò)誤檢查。（如下圖）

果斷安裝一波?！?學(xué)霸一把梭，差生文具多

文檔中提到了，該插件可能會(huì)和 vetur 插件有沖突，建議兩者只開(kāi)啟一個(gè)。（確實(shí)如此），所以在一個(gè)工作區(qū)內(nèi)的話，只開(kāi)一個(gè)插件吧，避免沖突。

本地?zé)岣?/strong>

接下來(lái)，我來(lái)修改 components/HelloWorld.vue 測(cè)試一下本地?zé)岣鹿δ堋?/p>

其實(shí)感覺(jué)不用試，速度肯定很快。

修改代碼后，保存的一瞬間就熱更新完成了，幾乎是感覺(jué)不到的。

這跟項(xiàng)目小也有關(guān)系，對(duì)于比較大的項(xiàng)目，修改代碼以后，熱更新的速度如何，還需要再驗(yàn)證。

構(gòu)建項(xiàng)目

本地開(kāi)發(fā)已經(jīng)體驗(yàn)過(guò)了，現(xiàn)在來(lái)構(gòu)建項(xiàng)目試試吧，看看產(chǎn)物長(zhǎng)啥樣。

使用 npm run build 命令可以構(gòu)建項(xiàng)目。這里發(fā)現(xiàn)有個(gè)報(bào)錯(cuò)。（如下圖）

我這是剛初始化的項(xiàng)目，怎么第一次構(gòu)建就報(bào)錯(cuò)了呢？

這里看出報(bào)錯(cuò)是 可選鏈操作符 語(yǔ)法的報(bào)錯(cuò)，想了一下應(yīng)該是 node 版本的問(wèn)題。我本地的 node 版本是 v12.20.0，在官方文檔找了找，確實(shí)有相關(guān)的問(wèn)題記錄。（如下圖）

看來(lái) vue + ts 的模板依賴的 node 版本需要更高，我這里將 node 版本切換到 v14.15.0，再次運(yùn)行構(gòu)建命令，就成功啦！（如下圖）

最終構(gòu)建的代碼是由 Rollup 進(jìn)行打包的，Rollup 其實(shí)我也沒(méi)用過(guò)，還是看看他的官方介紹吧。

這里主要還是了解一下 rollup 和 webpack 的區(qū)別，rollup 的模塊打包能力并沒(méi)有 webpack 強(qiáng)大，但是利用了 tree-shaking 充分處理 js 文件，打包出來(lái)的 js 文件會(huì)比較 “干凈”。

然后，我們進(jìn)入 dist 目錄，使用 anywhere（一個(gè)簡(jiǎn)單的 http 服務(wù)器） 運(yùn)行一下項(xiàng)目看看。

從上圖可以看出，vite 打包出來(lái)的文件，入口 js 是直接阻塞 DOM 渲染線程的。不過(guò)，這兩個(gè) js 的文件也不大，加起來(lái)才 53k。

當(dāng)然，隨著項(xiàng)目越來(lái)越大，這個(gè)體積也會(huì)越來(lái)越大的。

Vite 兼容性問(wèn)題

一個(gè)新框架的推出，大家都比較關(guān)心它的社區(qū)活躍度，其次就是它的兼容性了。

我們來(lái)看看 Vite 打包出來(lái)的代碼兼容性如何吧。（如下圖）

據(jù) Vite 官方介紹，默認(rèn)配置構(gòu)建出來(lái)的代碼是只能支持現(xiàn)代瀏覽器的，也就是下面這些。

可以通過(guò)修改配置最低支持到 es2015，也就是 ES6 （也就是說(shuō)，IE 不支持）。

但是可以通過(guò)一個(gè)插件 ——  @vitejs/plugin-legacy 來(lái)支持傳統(tǒng)瀏覽器（比如 IE11）。不過(guò)，IE11 好像也就是它的極限了，更低的版本可能會(huì)出現(xiàn)問(wèn)題。

所以，如果你對(duì)于瀏覽器兼容要求比較嚴(yán)格的話，請(qǐng)謹(jǐn)慎使用 Vite。

讀到這里，這篇“Vue的新型前端構(gòu)建工具Vite怎么用”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識(shí)點(diǎn)還需要大家自己動(dòng)手實(shí)踐使用過(guò)才能領(lǐng)會(huì)，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注億速云行業(yè)資訊頻道。