當前位置：首頁 > 科技 > 軟件

淺析Vite插件機制，你學會了嗎？

來源：責編：時間：2024-07-19 08:03:22 557觀看

導讀前言對于Vite來說，它是基于esbuild與rollup雙引擎設計的，在開發階段使用esbuild進行依賴預構建，然后基于瀏覽器原生支持的ESM完成開發預覽，而在生產環境打包時，直接使用的rollup構建。那么在這種背景下，Vite的插件機制應該

前言

對于Vite來說，它是基于esbuild與rollup雙引擎設計的，在開發階段使用esbuild進行依賴預構建，然后基于瀏覽器原生支持的ESM完成開發預覽，而在生產環境打包時，直接使用的rollup構建。那么在這種背景下，Vite的插件機制應該如何設計？

在源碼中，我們能夠經常看到PluginContainer的身影，Vite正是通過它來模擬rollup的行為

pluginContainer

PluginContainer 的實現基于借鑒于 WMR 中的 rollup-plugin-container.js ，主要功能有兩個:

管理插件的生命周期
實現插件鉤子內部的 Context 上下文對象

插件生命周期

在開發階段，vite會模擬rollup的行為，所以插件的執行機制也與rollup相同

圖片

調用 options 鉤子進行配置的轉換，得到處理后的配置對象。
調用buildStart鉤子，正式開始構建流程。
調用 resolveId 鉤子中解析文件路徑。(從 input 配置指定的入口文件開始)。
調用load鉤子加載模塊內容。
緊接著 Rollup 執行所有的 transform 鉤子來對模塊內容進行進行自定義的轉換（比如 babel 轉譯）
Rollup 拿到最后的模塊內容，進行 AST 分析，得到所有的 import 內容，調用 moduleParsed 鉤子
直到所有的 import 都解析完畢，Rollup 執行buildEnd鉤子，Build 階段結束。

?
這里需要注意的是：在 vite 中由于 AST 分析是通過 esbuild 進行的，所有沒有模擬 moduleParsed 鉤子

傳遞上下文對象

上下文對象通過 Context 實現 PluginContext 接口定義，PluginContext 實際上是 Rollup 內部定義的類型，可以在源碼中看到 vite 實現了 Rollup 上下文對象

class Context implements PluginContext {  //... 具體實現}type PluginContext = Omit<  RollupPluginContext, // Rollup 定義插件上下文接口  // not documented  | 'cache'  // deprecated  | 'moduleIds'>

Context 上下文對象一共有 14 個核心方法，其中有 3 個方法是比較核心的方法

parse：使用 Rollup 的內部基于 SWC 的解析器將代碼解析為 AST
resolve：將相對路徑解析為絕對路徑，從而正確地處理模塊之間的引用
load：加載并解析與給定 ID 對應的模塊，并在提供的情況下附加附加的元信息到模塊

更多內容可以查看rollup文檔

rollup插件

rollup構建流程主要分為兩大類：build和output，build 階段主要負責創建模塊依賴圖，初始化各個模塊的 AST 以及模塊之間的依賴關系。output階段才是真正的打包構建過程

插件hook類型（構建階段）

通過構建流程rollup的hook類型可以分為：build hook和output hook兩大類

Build Hook即在Build階段執行的鉤子函數，在這個階段主要進行模塊代碼的轉換、AST 解析以及模塊依賴的解析，那么這個階段的 Hook 對于代碼的操作粒度一般為模塊級別，也就是單文件級別。
Ouput Hook(官方稱為Output Generation Hook)，則主要進行代碼的打包，對于代碼而言，操作粒度一般為 chunk級別(一個 chunk 通常指很多文件打包到一起的產物)。

插件hook類型（執行方式）

除了上面這種分類，rollup插件還可以根據各自的執行方式來進行分類：

Build Hook即在Build階段執行的鉤子函數，在這個階段主要進行模塊代碼的轉換、AST 解析以及模塊依賴的解析，那么這個階段的 Hook 對于代碼的操作粒度一般為模塊級別，也就是單文件級別。
Ouput Hook(官方稱為Output Generation Hook)，則主要進行代碼的打包，對于代碼而言，操作粒度一般為 chunk級別(一個 chunk 通常指很多文件打包到一起的產物)。

除了根據構建階段可以將 Rollup 插件進行分類，根據不同的 Hook 執行方式也會有不同的分類，主要包括Async、Sync、Parallel、Squential、First這五種。在后文中我們將接觸各種各樣的插件 Hook，但無論哪個 Hook 都離不開這五種執行方式。

1. Async & Sync

首先是Async和Sync鉤子函數，兩者其實是相對的，分別代表異步和同步的鉤子函數，這個很好理解。

2. Parallel

這里指并行的鉤子函數。如果有多個插件實現了這個鉤子的邏輯，一旦有鉤子函數是異步邏輯，則并發執行鉤子函數，不會等待當前鉤子完成(底層使用 Promise.all)。

比如對于Build階段的buildStart鉤子，它的執行時機其實是在構建剛開始的時候，各個插件可以在這個鉤子當中做一些狀態的初始化操作，但其實插件之間的操作并不是相互依賴的，也就是可以并發執行，從而提升構建性能。反之，對于需要依賴其他插件處理結果的情況就不適合用 Parallel 鉤子了，比如 transform。

3. Sequential

Sequential 指串行的鉤子函數。這種 Hook 往往適用于插件間處理結果相互依賴的情況，前一個插件 Hook 的返回值作為后續插件的入參，這種情況就需要等待前一個插件執行完 Hook，獲得其執行結果，然后才能進行下一個插件相應 Hook 的調用，如transform。

4. First

如果有多個插件實現了這個 Hook，那么 Hook 將依次運行，直到返回一個非 null 或非 undefined 的值為止。比較典型的 Hook 是 resolveId，一旦有插件的 resolveId 返回了一個路徑，將停止執行后續插件的 resolveId 邏輯。

通用hook

以下鉤子在服務器啟動時被調用：

options
buildStart

以下鉤子會在每個傳入模塊請求時被調用：

resolveId
load
transform

它們還有一個擴展的 options 參數，包含其他特定于 Vite 的屬性。

以下鉤子在服務器關閉時被調用：

buildEnd
closeBundle

請注意 moduleParsed 鉤子在開發中是不會被調用的，因為 Vite 為了性能會避免完整的 AST 解析。

output階段的hook（除了 closeBundle) 在開發中是不會被調用的。你可以認為 Vite 的開發服務器只調用了 rollup.rollup() 而沒有調用 bundle.generate()。

Vite 獨有hook

Vite 插件也可以提供鉤子來服務于特定的 Vite 目標。當然這些鉤子會被 Rollup 忽略。

config

在解析 Vite 配置前調用。鉤子接收原始用戶配置（命令行選項指定的會與配置文件合并）和一個描述配置環境的變量，包含正在使用的 mode 和 command。它可以返回一個將被深度合并到現有配置中的部分配置對象，或者直接改變配置（如果默認的合并不能達到預期的結果）。

// 返回部分配置（推薦）const partialConfigPlugin = () => ({  name: 'nanjiu-plugin',  config(config, { command }) {    console.log('config', config, command)  }})

圖片

需要注意的是：用戶插件在運行這個鉤子之前會被解析，因此在 config 鉤子中注入其他插件不會有任何效果。

configResolved

在解析 Vite 配置后調用。使用這個鉤子讀取和存儲最終解析的配置。

const examplePlugin = () => {  let config  return {    name: 'read-config',    configResolved(resolvedConfig) {      // 存儲最終解析的配置      config = resolvedConfig    },    // 在其他鉤子中使用存儲的配置    transform(code, id) {      if (config.command === 'serve') {        // dev: 由開發服務器調用的插件      } else {        // build: 由 Rollup 調用的插件      }    },  }}

configureServer

是用于配置開發服務器的鉤子。最常見的用例是在內部 connect 應用程序中添加自定義中間件

const myPlugin = () => ({  name: 'configure-server',  configureServer(server) {    server.middlewares.use((req, res, next) => {      // 自定義請求處理...    })  },})

configurePreviewServer

與 configureServer 相同，但用于預覽服務器。configurePreviewServer 這個鉤子與 configureServer 類似，也是在其他中間件安裝前被調用。如果你想要在其他中間件之后安裝一個插件，你可以從 configurePreviewServer 返回一個函數，它將會在內部中間件被安裝之后再調用

const myPlugin = () => ({  name: 'configure-preview-server',  configurePreviewServer(server) {    // 返回一個鉤子，會在其他中間件安裝完成后調用    return () => {      server.middlewares.use((req, res, next) => {        // 自定義處理請求 ...      })    }  },})

transformIndexHtml

轉換 index.html 的專用鉤子。鉤子接收當前的 HTML 字符串和轉換上下文。上下文在開發期間暴露ViteDevServer實例，在構建期間暴露 Rollup 輸出的包。

這個鉤子可以是異步的，并且可以返回以下其中之一:

經過轉換的 HTML 字符串
注入到現有 HTML 中的標簽描述符對象數組（{ tag, attrs, children }）。每個標簽也可以指定它應該被注入到哪里（默認是在 <head> 之前）
一個包含 { html, tags } 的對象

默認情況下 order 是 undefined，這個鉤子會在 HTML 被轉換后應用。為了注入一個應該通過 Vite 插件管道的腳本， order: 'pre' 指將在處理 HTML 之前應用。order: 'post' 是在所有未定義的 order 的鉤子函數被應用后才應用。

const htmlPlugin = () => {  return {    name: 'nanjiu-plugin',    transformIndexHtml(html) {      return html.replace(/<title>(.*?)<//title>/,                          `<title> nanjiu plugin </title>`)    },  }}

handleHotUpdate

執行自定義 HMR 更新處理。鉤子接收一個帶有以下簽名的上下文對象

interface HmrContext {  file: string  timestamp: number  modules: Array<ModuleNode>  read: () => string | Promise<string>  server: ViteDevServer}

modules 是受更改文件影響的模塊數組。它是一個數組，因為單個文件可能映射到多個服務模塊（例如 Vue 單文件組件）。
read 這是一個異步讀函數，它返回文件的內容。之所以這樣做，是因為在某些系統上，文件更改的回調函數可能會在編輯器完成文件更新之前過快地觸發，并 fs.readFile 直接會返回空內容。傳入的 read 函數規范了這種行為。

const hotPlugin = () => {  return {    name: 'nanjiu-plugin',    handleHotUpdate({ server, modules, timestamp}) {      console.log('handleHotUpdate', modules)    },  }}

當我修改App.vue文件時，modules可以獲取到如下信息：

圖片

插件順序

一個 Vite 插件可以額外指定一個 enforce 屬性（類似于 webpack 加載器）來調整它的應用順序。enforce 的值可以是pre 或 post。解析后的插件將按照以下順序排列：

Alias
帶有 enforce: 'pre' 的用戶插件
Vite 核心插件
沒有 enforce 值的用戶插件
Vite 構建用的插件
帶有 enforce: 'post' 的用戶插件
Vite 后置構建插件

請注意，這與鉤子的排序是分開的，鉤子的順序仍然會受到它們的 order 屬性的影響，這一點和 Rollup 鉤子的表現一樣

總結

vite 在開發環境中，會使用 createPluginContainer 方法創建插件容器，插件容器有兩個核心功能：管理插件生命周期、傳遞插件上下文

圖片

本文鏈接：http://www.tebozhan.com/showinfo-26-101721-0.html淺析Vite插件機制，你學會了嗎？

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。郵件：2376512515@qq.com

上一篇：軟件版本號為什么那么奇怪？

下一篇：基于Netty的自研流系統緩存實現挑戰：內存碎片與OOM困境

標簽：

熱門焦點

小米降噪藍牙耳機Necklace分享：聽一首歌讀懂一個故事

在今天下午的小米Civi 2新品發布會上，小米還帶來了一款新的降噪藍牙耳機Necklace，我們也在發布結束的第一時間給大家帶來這款耳機的簡單分享。現在大家能見到最多的藍牙耳機
得物效率前端微應用推進過程與思考

一、背景效率工程隨著業務的發展，組織規模的擴大，越來越多的企業開始意識到協作效率對于企業團隊的重要性，甚至是決定其在某個行業競爭中突圍的關鍵，是企業長久生存的根本。得物
學習JavaScript的10個理由...

作者 | Simplilearn編譯 | 王瑞平當你決心學習一門語言的時候，很難選擇到底應該學習哪一門，常用的語言有Python、Java、JavaScript、C/CPP、PHP、Swift、C#、Ruby、Objective-
多線程開發帶來的問題與解決方法

使用多線程主要會帶來以下幾個問題：（一）線程安全問題　　線程安全問題指的是在某一線程從開始訪問到結束訪問某一數據期間，該數據被其他的線程所修改，那么對于當前線程而言，該線程
華為HarmonyOS 4.0將于8月4日發布或搭載AI大模型技術

華為宣布HarmonyOS4.0將于8月4日正式發布。此前，華為已經針對開發者公布了HarmonyOS4.0，以便于開發者提前進行適配，也因此被曝光出了一些新系統的特性
2納米決戰2025

集微網報道從三強爭霸到四雄逐鹿，2nm的廝殺聲已然隱約傳來。無論是老牌勁旅臺積電、三星，還是誓言重回先進制程領先地位的英特爾，甚至初成立不久的新
三星顯示已開始為AR設備研發硅基LED微顯示屏

7月18日消息，據外媒報道，隨著蘋果首款頭顯產品Vision Pro在6月份正式推出，AR/VR/MR等頭顯產品也就將成為各大公司下一個重要的競爭領域，對顯示屏這一關
iQOO Neo8 Pro評測：旗艦雙芯加持最強性能游戲旗艦

【Techweb評測】去年10月，iQOO推出了一款Neo7手機，該機搭載了聯發科天璣9000+，配備獨顯芯片Pro+，帶來了同價位段最佳的游戲體驗，一經上市便受到了諸多用
朋友圈可以修改可見范圍了蘋果用戶可率先體驗

近日，iOS用戶迎來微信8.0.27正式版更新，除了可更換二維碼背景外，還新增了多項實用功能。在新版微信中，朋友圈終于可以修改可見范圍，簡單來說就是已發布的朋友圈

AVt天堂网手机版,亚洲va久久久噜噜噜久久4399,天天综合亚洲色在线精品,亚洲一级Av无码毛片久久精品

淺析Vite插件機制，你學會了嗎？

前言

pluginContainer

插件生命周期

傳遞上下文對象

rollup插件

插件hook類型（構建階段）

插件hook類型（執行方式）

1. Async & Sync

2. Parallel

3. Sequential

4. First

通用hook

Vite 獨有hook

config

configResolved

configureServer

configurePreviewServer

transformIndexHtml

handleHotUpdate

插件順序

總結

小米降噪藍牙耳機Necklace分享：聽一首歌讀懂一個故事

得物效率前端微應用推進過程與思考

學習JavaScript的10個理由...

多線程開發帶來的問題與解決方法

華為HarmonyOS 4.0將于8月4日發布或搭載AI大模型技術

2納米決戰2025

三星顯示已開始為AR設備研發硅基LED微顯示屏

iQOO Neo8 Pro評測：旗艦雙芯加持最強性能游戲旗艦

朋友圈可以修改可見范圍了蘋果用戶可率先體驗

最新推薦

猜你喜歡

熱門推薦

相關資訊