Lala Code

Lala 的前端大補帖,歡迎一起鑽研前端技術😊

0%

Vite 教學快速上手,秒安裝秒啟動

vite

Vite 是由 Vue 之父 尤雨溪開發的新打包工具,可以說是 Vue Cli 的升級版,Cli 因為有依賴 webpack 解決了很多打包上複雜的問題,然而,當專案越來越大,打包時間隨著專案變大包跑得越久,大大降低了開發者的開發效率和幸福感。

vite 解決了開發速度上的痛點,秒啟動根本驚為天人⚡️⚡️⚡️!打包速度極快,不用像 vue-cli 要進行編譯後啟動,省了很多開發上的時間。


Vite 是什麼?

Vite 法語意為「快速」的意思,提供開發者一個快速啟動、即時更新的開發工具,預設無設定檔。

🔸 開發環境:基於瀏覽器原生 ES Module 提供的內建功能,能夠通過 import 和 export 連結檔案,並有基於 esbuild 的依賴預建構,擁有速度快到驚人的緩存模塊熱更新(HMR),Vite 會預先針對所有模組進行轉譯與打包,當瀏覽器再次請求某個模組時,就只針對被更改的模組進行編譯,這樣就能避免多次請求的問題了

📌 熱更新:Hot Module Replacement,簡稱 HMR,在不刷新瀏覽器的前提下就能夠對應用進行更新


🔸 生產環境:使用 Rollup 打包代碼,透過較快的時間來將檔案打包成更小容量。

Vite 安裝

使用 NPM

1
npm create vite@latest

使用 yarn

1
yarn create vite

接著依自己專案需求來做選擇(以下以 vue 為例)

Project name: (專案名稱)

1
vite-project

Select a framework: (選擇框架)
1
2
3
4
5
6
vanilla
✔ vue
react
preact
lit
svelte

Select a variant: (使用 js 或 ts)
1
2
✔ vue
vue-ts

這樣就安裝完成了!!!另外還有更快速的指令,
你也可以通過附加的命令行選項直接指定專案名稱和框架模板

1
2
3
4
5
6
7
8
# npm 6.x
npm create vite@latest my-vue-app --template vue

# npm 7+, extra double-dash is needed:
npm create vite@latest my-vue-app -- --template vue

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

🔸 框架模板

JavaScript TypeScript
vanilla vanilla-ts
vue vue-ts
react react-ts
preact preact-ts
lit lit-ts
svelte svelte-ts

注意:
Vite 需要 Node.js 版本 >= 12.0.0
vue 目前僅支援 vue3,所以不能使用與 vue3 不兼容的套件
引入檔案必須掛載副檔名


Vite 專案目錄結構

打開專案後,其實目錄結構跟 Cli 差不多,只是多了一個 vite 的設定檔 vite.config.js

vite目錄


比較特別的是,在 Cli 時 index.html 是在 public 文件夾內,而 Vite 放在最外層了,index.html 是 Vite 項目的入口文件,原碼也做了一些調整。

index

瀏覽器透過 JavaScript 的 <script type="module"> 找到 main.js 進入點,便可以使用 ESM 語法,根據 import 的 url 路徑加載模組,
Vite 有根目錄的概念,index.html 中的 URL 自動轉換絕對路徑,也可以使用相對路徑導入,因此不再需要 %PUBLIC_URL% 佔位符了。



共用 SCSS 變數

vite 共用 SCSS 變數需在 vite.config 設定,
由於 vite 沒有內建 @ 的語法糖,如要使用需設定 alias,更多設定請參考官方文件

vite.config

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
const path = require('path')

export default defineConfig({
plugins: [vue()],
resolve: {
alias: {
'@': path.resolve(__dirname, 'src'),
},
},
css:{
preprocessorOptions: {
scss: {
additionalData: `@import "@/assets/scss/variable.scss";`,
charset: false,
}
}
}
})


Vite 跟 Cli 對比

Vite Vue-Cli
打包工具 rollup webpack
效能
功能 功能較基本、簡單 webpack 功能性較豐富
框架兼容 提供多種框架支援,Vue 只支援 Vue3 以上 僅支援 Vue 框架,Vue2、Vue3 都兼容
瀏覽器兼容 僅支援 ES6 的瀏覽器 因有 babel 可兼容多種瀏覽器

結語

Vite 的快速省了很多開發時間,是開發者的福音,尤雨溪在 twitter 也發表了,
Vite 會取代 Vue CLI 嗎?

尤雨溪twitter


起初,我也不確定,但是現階段我相信最終會是這樣。

你學會 vite 了嗎?


參考文獻

Vite 官方文件



🚀實體工作坊分享

玩轉 Web頁面的前端技術(HTML/CSS/JS) 一日體驗課

最近時賦學苑開了實體體驗課,即使你對程式碼沒有概念也能上手!Lala 會帶你一起做出一個個人品牌形象網站,帶你快速了解前端的開發流程,快跟我們一起玩轉 Web 吧!



🚀線上課程分享

線上課程可以加速學習的時間,省去了不少看文件的時間XD,以下是我推薦的一些課程
想學習更多關於前後端的線上課程,可以參考看看。

Hahow

Hahow 有各式各樣類型的課程,而且是無限次數觀看,對學生或上班族而言,不用擔心被時間綁住



六角學院

如果你是初學者,非常推薦六角學院哦!
剛開始轉職也是上了六角的課,非常的淺顯易懂,最重要的是,隨時還有線上的助教幫你解決問題!


Udemy

Udemy 裡的課程非常的多,品質普遍不錯,且價格都滿實惠的,CP值很高!
也是很多工程師推薦的線上課程網站。
❤️