Vite3.0都來了，你還捲動嗎？（Vite3.0新特性一覽）

語言: CN / TW / HK
時間 2022-07-18 09:15:06

theme: fancy highlight: atom-one-light

🍒 寫在前面

前一段時間，尤大發布了Vite3.0，以及更新了Vite的官方文件，如下圖

image_3nXcsH0SIm.png

進入首頁反正給我的感覺就是很驚豔。

這篇文件就來簡單的介紹一下Vite3.0都有哪些新東西，別被卷的不成樣子。

🍐 模板的變更

就那我自己來說，我用Vite建立最多的就是Vue專案， 這個更新後，使用Vite建立的Vue模板的主題與Vite的文件保持一致，也支援暗色與亮色模式，且icon從Vue的logo換成了Vite的logo。

我們可以使用Vite建立一個Vue模板並執行一下看個效果：

```powershell pnpm create vite

project name -> demo

select a framework -> vue

select a variant -> vue

cd demo pnpm install pnpm dev ```

兩個主題就是下面這樣的

image_L9_G-P_zK3.png

除了Vue外，下面這些模板的主題也是一致的。

image_jaumWTLJhM.png

🍏 Vite CLI的優化

Vite CLI在命令列中的樣式也進行了優化，看下面這個圖

image_RdugBdynvi.png

左邊是Vite3.0，右邊是Vite2.0，在視覺上明顯3.0比2.0要好看。

除了外觀之外，我們可以看到預設的埠號也發生了變化，從3000變成了5173；Local的地址從localhost變成了127.0.0.1。

🍎 import.meta.glob API的變化

import.meta.globAPI可以動態的匯入檔案，在Vite3中允許import.meta.glob被重寫，具體可以參照Glob匯入形式，在官方文件中描述的已經非常的詳細了。

🥭 其他內容

Vite3.0還更新的一些其他的內容，如下：

  • Vite整體體積變小；

  • JS和CSS的壓縮工具使用了ESbuild（Vite2中開始）;

  • 修復了N多個bug；

  • 相容性做了調整，最低支援node14.18+；

  • Vite決定每年釋出一個新的版本；

🍍 寫在最後

本篇文中簡短了介紹了一下Vite中的一些新特性。

現在前端發展的速度已經變的非常的快，時刻保持對新技術的敏感度才能保證自己不被淘汰，加油吧各位~

最後祝大家：天天不加班，年薪過百萬。

參考

「」
「」