一、認(rèn)識(shí)Vite

Webpack是目前整個(gè)前端使用最多的構(gòu)建工具，但是除了webpack之后也有其他的一些構(gòu)建工具：

• 比如rollup、parcel、gulp、vite等等

什么是vite呢？ 官方的定位：下一代前端開發(fā)與構(gòu)建工具；

如何定義下一代開發(fā)和構(gòu)建工具呢？

• 我們知道在實(shí)際開發(fā)中，我們編寫的代碼往往是不能被瀏覽器直接識(shí)別的，比如ES6、TypeScript、Vue文件等
  等；
• 所以我們必須通過構(gòu)建工具來對代碼進(jìn)行轉(zhuǎn)換、編譯，類似的工具有webpack、rollup、parcel；
• 但是隨著項(xiàng)目越來越大，需要處理的JavaScript呈指數(shù)級增長，模塊越來越多；
• 構(gòu)建工具需要很長的時(shí)間才能開啟服務(wù)器，HMR也需要幾秒鐘才能在瀏覽器反應(yīng)出來；
• 所以也有這樣的說法：天下苦webpack久矣；

Vite (法語意為 “快速的”，發(fā)音 /vit/) 是一種新型前端構(gòu)建工具，能夠顯著提升前端開發(fā)體驗(yàn)。

二、Vite的構(gòu)造

它主要由兩部分組成：

• 一個(gè)開發(fā)服務(wù)器，它基于原生ES模塊提供了豐富的內(nèi)建功能，HMR的速度非常快速；
• 一套構(gòu)建指令，它使用rollup打開我們的代碼，并且它是預(yù)配置的，可以輸出生成環(huán)境的優(yōu)化過的靜態(tài)資源；

目前是否要大力學(xué)習(xí)vite？vite的未來是怎么樣的？

• 目前vite雖然已經(jīng)更新到2.0，依然并不算非常的穩(wěn)定，并且比較少大型項(xiàng)目（或框架）使用vite來進(jìn)行構(gòu)建；
• vite的整個(gè)社區(qū)插件等支持也還不夠完善；
• 包括vue腳手架本身，目前也還沒有打算遷移到vite，而依然使用webpack（雖然后期一定是有這個(gè)打算的）；
• 所以vite看起來非常的火熱，在面試也可能會(huì)問到，但是實(shí)際項(xiàng)目中應(yīng)用的還比較少；

三、瀏覽器原生支持模塊化

但是如果我們不借助于其他工具，直接使用ES Module來開發(fā)有什么問題呢？

• 首先，我們會(huì)發(fā)現(xiàn)在使用loadash時(shí)，加載了上百個(gè)模塊的js代碼，對于瀏覽器發(fā)送請求是巨大的消耗；
• 其次，我們的代碼中如果有TypeScript、less、vue等代碼時(shí)，瀏覽器并不能直接識(shí)別；

事實(shí)上，vite就幫助我們解決了上面的所有問題。

四、Vite的安裝和使用

注意：Vite本身也是依賴Node的，所以也需要安裝好Node環(huán)境 并且Vite要求Node版本是大于12版本的；

首先，我們安裝一下vite工具

npm install vite –g # 全局安裝 npm install vite –D # 局部安裝

通過vite來啟動(dòng)項(xiàng)目：

npx vite

五、Vite對css的支持

vite可以直接支持css的處理

• 直接導(dǎo)入css即可；

vite可以直接支持css預(yù)處理器，比如less

• 直接導(dǎo)入less；
• 之后安裝less編譯器；

vite直接支持postcss的轉(zhuǎn)換：

• 只需要安裝postcss和postcss-preset-env，并且配置 postcss.config.js 的配置文件即可；

npm install postcss postcss-preset-env -D

六、Vite對TypeScript的支持

vite對TypeScript是原生支持的，它會(huì)直接使用ESBuild來完成編譯：

• 只需要直接導(dǎo)入即可；

如果我們查看瀏覽器中的請求，會(huì)發(fā)現(xiàn)請求的依然是ts的代碼：

• 這是因?yàn)関ite中的服務(wù)器Connect會(huì)對我們的請求進(jìn)行轉(zhuǎn)發(fā)；
• 獲取ts編譯后的代碼，給瀏覽器返回，瀏覽器可以直接進(jìn)行解析；
  

注意：在vite2中，已經(jīng)不再使用Koa了，而是使用Connect來搭建的服務(wù)器

七、Vite對vue的支持

vite對vue提供第一優(yōu)先級支持：

• Vue 3 單文件組件支持：@vitejs/plugin-vue
• Vue 3 JSX 支持：@vitejs/plugin-vue-jsx
• Vue 2 支持：underfin/vite-plugin-vue2

安裝支持vue的插件：

npm install @vitejs/plugin-vue -D

在vite.config.js中配置插件：

八、Vite打包項(xiàng)目

我們可以直接通過vite build來完成對當(dāng)前項(xiàng)目的打包工具：

npx vite build

我們可以通過preview的方式，開啟一個(gè)本地服務(wù)來預(yù)覽打包后的效果：

npx vite preview

配置script:

九、Vite腳手架工具

在開發(fā)中，我們不可能所有的項(xiàng)目都使用vite從零去搭建，比如一個(gè)react項(xiàng)目、Vue項(xiàng)目；

• 這個(gè)時(shí)候vite還給我們提供了對應(yīng)的腳手架工具；

所以Vite實(shí)際上是有兩個(gè)工具的：

• vite：相當(dāng)于是一個(gè)構(gòu)件工具，類似于webpack、rollup；
• @vitejs/create-app：類似vue-cli、create-react-app；

如果使用腳手架工具呢？

npm init @vitejs/app

上面的做法相當(dāng)于省略了安裝腳手架的過程：

npm install @vitejs/create-app -g create-app myDemo

總結(jié)

以上是生活随笔為你收集整理的Vite学习笔记的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。