外掛系統
Vite 本身核心功能精簡，許多進階能力（框架支援、特殊檔案格式、自訂轉換邏輯）都透過外掛（plugin）擴充。Vite 的外掛介面是 Rollup 外掛介面的擴充版本，因此大多數 Rollup 外掛也能直接在 Vite 中使用。
為什麼需要外掛
Vite 開發伺服器與正式打包，底層分別由不同引擎驅動（開發時用原生 ESM ＋ esbuild，打包時用 Rollup／Rolldown）。外掛系統讓同一份邏輯，可以同時在這兩種模式下運作一致，例如：
- 讓 Vite 認得
.vue、.jsx等框架特有的檔案格式。 - 在打包過程中轉換或注入程式碼（例如自動注入版本號、壓縮特定資源）。
- 提供更精準的 HMR 邊界，讓框架元件狀態在修改後能被保留。
常用官方與社群外掛
| 外掛 | 用途 |
|---|---|
@vitejs/plugin-react |
支援 React 的 JSX 轉譯與 Fast Refresh（React 的 HMR 實作） |
@vitejs/plugin-vue |
支援 Vue 單檔元件（.vue）的編譯 |
@vitejs/plugin-legacy |
為不支援原生 ESM 的舊版瀏覽器產生相容版本 |
vite-plugin-svgr |
讓 React 專案可以把 SVG 當作元件直接 import |
vite-tsconfig-paths |
讓 tsconfig.json 中設定的路徑別名在 Vite 中生效 |
安裝方式都是標準的 npm 套件安裝，再於 vite.config 的 plugins 陣列中註冊即可（範例見〈設定檔 vite.config〉）。
外掛的基本結構
一個最簡單的 Vite 外掛，其實就是一個回傳特定形狀物件的函式：
function myPlugin() {
return {
name: 'my-plugin', // 除錯訊息會用到，建議取有意義的名稱
transform(code, id) {
// 在模組被載入時，可以檢查／修改程式碼內容
if (id.endsWith('.special.js')) {
return code.replace('__BUILD_TIME__', new Date().toISOString())
}
},
}
}
export default defineConfig({
plugins: [myPlugin()],
})
常見的擴充點（hook）包括 transform（轉換模組內容）、resolveId（自訂模組解析規則）、configureServer（客製化開發伺服器行為）等。多數專案不需要自己寫外掛，但了解這個結構，有助於讀懂第三方外掛原始碼、排查問題。
推薦影音
動手寫一個 Vite 外掛
簡述：完整示範從零開始撰寫一個 Vite 外掛，包含常用 hook 的用法與除錯方式，適合想深入了解外掛機制、或需要客製化建置流程的讀者。