Vite 的插件系統是其最強大的功能之一，可讓開發人員擴展和自訂建置管道。無論您需要轉換文件類型、注入建置時常數或與其他工具集成，Vite 外掛程式 API 都可以讓您完全掌控。
了解Vite的插件系統
Vite 插件是具有鉤子函數的對象，在建置生命週期中以特定積分執行。外掛程式分三個階段運作：服務（開發伺服器）、建置（生產）和 SSR。一個基本的插件如下所示：
import type { Plugin } from 'vite';
export function myPlugin(): Plugin {
return {
name: 'my-plugin',
config(config) {
return config;
},
transform(code, id) {
if (id.endsWith('.custom')) {
return { code: `export default ${JSON.stringify(code)}`, map: null };
}
},
};
}
偵錯需要 name 屬性。 enforce: 'pre' 或 'post' 控制相對於其他外掛程式的執行順序。
匯總相容性
Vite 的插件介面擴展了 Rollup 的接口，這意味著大多數 Rollup 插件可以開箱即用地與 Vite 配合使用。共用掛鉤包括 resolveId、load、transform 和 buildEnd。 Vite 特定的鉤子添加了開發伺服器功能：
| 鉤 | 目的 | 相 |
|---|---|---|
| 佔位符_0 | 解析前修改Vite配置 | 服務+建置 |
| 佔位符_0 | 閱讀最終解決的配置 | 服務+建置 |
| 佔位符_0 | 擴充開發伺服器 | 只提供 |
| 佔位符_0 | 自訂 HMR 行為 | 只提供 |
將 Rollup 外掛程式移植到 Vite 時，請確保它不會在開發伺服器上下文中錯誤地使用 Rollup 特定的 API，例如 this.emitFile 。
虛擬模組
虛擬模組僅在建置時存在，由插件程式碼而不是檔案系統檔案產生：
const VIRTUAL_MODULE = 'virtual:config';
export function configPlugin(): Plugin {
return {
name: 'config-plugin',
resolveId(id) {
if (id === VIRTUAL_MODULE) return '\0' + VIRTUAL_MODULE;
},
load(id) {
if (id === '\0' + VIRTUAL_MODULE) {
const config = { apiUrl: process.env.API_URL };
return `export default ${JSON.stringify(config)}`;
}
},
};
}
\0 前綴是用來標記已解析虛擬模組的 Rollup 約定。用例包括注入 polyfill、提供建置時常數以及從設定檔產生程式碼。
HMR 集成
熱模組更換可保持快速的開發體驗。 handleHotUpdate 掛鉤可讓您自訂哪些模組無效：
handleHotUpdate({ server, modules, timestamp }) {
if (modules.every(m => m.url.includes('node_modules'))) {
return [];
}
server.ws.send({
type: 'custom',
event: 'custom-update',
data: { timestamp },
});
return modules;
}
傳回一個空數組以抑制 HMR，或傳回一個過濾列表以進行粒度更新而不是完全重新載入。
測試與發布
使用 Vite 的程式設計 API 整合測試您的插件：
import { build } from 'vite';
const result = await build({
plugins: [testPlugin({ option: 'value' })],
logLevel: 'silent',
});
發佈時，請遵循 vite-plugin-* 命名約定，將 vite 列為對等依賴項，並包含 TypeScript 聲明。在 CI 中跨多個 Vite 版本進行測試，以便及早發現重大變更。
Vite 的插件 API 設計精良、簡單、強大。從簡單的轉換開始，探索用於建構時程式碼產生的虛擬模組，並利用 HMR 掛鉤來獲得精美的開發體驗。