Vite 插件 API 約定

2023-02-17 11:40 更新

Vite 插件擴(kuò)展了設(shè)計出色的 Rollup 接口,帶有一些 Vite 獨有的配置項。因此,你只需要編寫一個 Vite 插件,就可以同時為開發(fā)環(huán)境和生產(chǎn)環(huán)境工作。

如果插件不使用 Vite 特有的鉤子,可以作為 兼容 Rollup 的插件 來實現(xiàn),推薦使用 Rollup 插件名稱約定。

  • Rollup 插件應(yīng)該有一個帶 ?rollup-plugin-? 前綴、語義清晰的名稱。
  • 在 package.json 中包含 ?rollup-plugin? 和 ?vite-plugin? 關(guān)鍵字。

這樣,插件也可以用于純 Rollup 或基于 WMR 的項目。

對于 Vite 專屬的插件:

  • Vite 插件應(yīng)該有一個帶 ?vite-plugin-? 前綴、語義清晰的名稱。
  • 在 package.json 中包含 ?vite-plugin? 關(guān)鍵字。
  • 在插件文檔增加一部分關(guān)于為什么本插件是一個 Vite 專屬插件的詳細(xì)說明(如,本插件使用了 Vite 特有的插件鉤子)。

如果你的插件只適用于特定的框架,它的名字應(yīng)該遵循以下前綴格式:

  • ?vite-plugin-vue-? 前綴作為 Vue 插件
  • ?vite-plugin-react-? 前綴作為 React 插件
  • ?vite-plugin-svelte-? 前綴作為 Svelte 插件

Vite 對虛擬模塊的規(guī)范是在路徑前加上 ?virtual:?。如果可能的話,插件名應(yīng)該作為命名空間使用,以避免與生態(tài)系統(tǒng)中的其他插件發(fā)生沖突。例如,?vite-plugin-posts? 可以讓用戶引入 ?virtual:posts? 或 ?virtual:posts/helpers? 虛擬模塊,以獲得構(gòu)建時信息。在內(nèi)部,使用虛擬模塊的插件在解析模塊 ID 時應(yīng)以 ?\0? 為前綴,這是一個來自 Rollup 生態(tài)系統(tǒng)的慣例。這可以防止其他插件試圖處理這個 ID(如節(jié)點解析),而像 sourcemap 這樣的核心功能可以使用這些信息來區(qū)分虛擬模塊和普通文件。?\0? 在導(dǎo)入的 URL 中不是一個允許的字符,所以我們必須在導(dǎo)入分析中替換它們。在瀏覽器中,一個 ?0{id}? 的虛擬 ID 最終被編碼為 ?/@id/__x00__{id}?。在進(jìn)入插件處理管道之前,這個 ID 會被解碼回來。所以這個過程在插件鉤子代碼中將是不可見的。

請注意,模塊都直接來源于真實的文件,而單文件組件(比如 .vue 或 .svelte 文件)中的 script 模塊將不需要這樣的轉(zhuǎn)換。單文件組件被處理時一般會生成一系列子模塊但其代碼都可以被映射回文件系統(tǒng)。對這些子模塊使用 ?\0? 會使得 sourcemap 工作異常。


以上內(nèi)容是否對您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號