vite的插件基于rollup，在本地服務(wù)生成是會同事創(chuàng)建插件容器，按順序針對插件中的hook做批量調(diào)用，當(dāng)前支持的hook有（區(qū)分構(gòu)建和開發(fā)）：

• 通用hook
  |hook名稱|觸發(fā)時機|
  |---|---|
  |options|服務(wù)器啟動時被調(diào)用|
  |buildStart|服務(wù)器啟動時被調(diào)用|
  |resolveId|每個傳入模塊請求時被調(diào)用|
  |load|每個傳入模塊請求時被調(diào)用|
  |transform|每個傳入模塊請求時被調(diào)用|
  |buildEnd|服務(wù)器關(guān)閉時被調(diào)用|
  |closeBundle|服務(wù)器關(guān)閉時被調(diào)用|

• vite獨有hook

下一個問題，vite是如何實現(xiàn)插件的設(shè)計的？答案我們從createPluginContainer里面找

// packages/vite/src/node/server/pluginContainer.ts

export async function createPluginContainer(
  { plugins, logger, root, build: { rollupOptions } }: ResolvedConfig,
  watcher?: FSWatcher
): Promise<PluginContainer>

createPluginContainer傳入2個參數(shù)：

• resolveConfig配置：包含了plugins，logger， root， build（包含rollupOptions），這里實際對應(yīng)的就是創(chuàng)建server的config，只不過用resolveConfig函數(shù)解析了下。
• watcher：文件監(jiān)控器，在創(chuàng)建server的時候調(diào)用的是chokidar實例來實現(xiàn)

返回的就是PluginContainer。
函數(shù)體其中也包含很多內(nèi)容

function warnIncompatibleMethod(method: string, plugin: string){}
// 針對每個異步pipeline都創(chuàng)建一個上下文來跟蹤多pipeline下追蹤到當(dāng)前激活的插件
class Context implements PluginContext {}

function formatError(){}

class TransformContext extends Context 

const container: PluginContainer 

return container

在這里我們看到上面的主要container就是pluginContainer，我們具體來看看里面包含哪些內(nèi)容：

const container: PluginContainer = {
  options: await (async ()=>{})(),
  async buildStart(){}
async resolveId(rawId, importer = join(root, 'index.html'), skips, ssr){}
async load(id, ssr){}
async transform(code, id, inMap, ssr){}
watchChange(id, event = 'update'){}
async close(){}
}

可以看到插件容器主要就是包含選項的初始化，rollup 各個特定hook的調(diào)用（buildStart,resolveId,load,transform）,變化監(jiān)控同步函數(shù)watchChange，以及最后的close方法。下面我們來逐個拆解：

• options異步函數(shù)解析：

1. 將每個插件里的options方法執(zhí)行了一遍

    for (const plugin of plugins) {
        if (!plugin.options) continue
        options =
          (await plugin.options.call(minimalContext, options)) || options
      }

2. 如果有配置acornInjectPlugins：那就合并進(jìn)acore的parser中：

if (options.acornInjectPlugins) {
        parser = acorn.Parser.extend(
          ...[
            acornClassFields,
            acornStaticClassFeatures,
            acornNumericSeparator
          ].concat(options.acornInjectPlugins)
        )
      }

3. 返回包含acorn及options的對象

return {
        acorn,
        acornInjectPlugins: [],
        ...options
      }

• buildStart: 使用promise.all把所有插件里面但凡有該配置的都執(zhí)行下

await Promise.all(
        plugins.map((plugin) => {
          if (plugin.buildStart) {
            return plugin.buildStart.call(
              new Context(plugin) as any,
              container.options as NormalizedInputOptions
            )
          }
        })
      )

• resolveId:resolveId階段屬于rollup的通用hook，流程也類似，針對每個plugin執(zhí)行對應(yīng)鉤子：

for (const plugin of plugins) {
 // 沒有就跳過
        if (!plugin.resolveId) continue
// 如果在跳過的列表里面，也跳過
        if (skips?.has(plugin)) continue
// 將該插件設(shè)置為當(dāng)前激活插件
        ctx._activePlugin = plugin
// 開始調(diào)用方法
        const result = await plugin.resolveId.call(
          ctx as any,
          rawId,
          importer,
          {},
          ssr
        )
// 如果沒結(jié)果就跳過到下一個
        if (!result) continue
// 如果結(jié)果為string，那結(jié)果就是對應(yīng)的id
        if (typeof result === 'string') {
           id = result
        } else {
// 如果不是那就是object對象，找到對應(yīng)id屬性
          id = result.id
          Object.assign(partial, result)
        }

        // resolveId() is hookFirst - first non-null result is returned.
        break
      }
// 如果id有了，就返回partial，沒有返回null
if (id) {
        partial.id = isExternalUrl(id) ? id : normalizePath(id)
        return partial as PartialResolvedId
      } else {
        return null
      }

• load階段：遍歷plugin執(zhí)行hook, 有結(jié)果就返回，沒有返回null

for (const plugin of plugins) {
        if (!plugin.load) continue
        ctx._activePlugin = plugin
        const result = await plugin.load.call(ctx as any, id, ssr)
        if (result != null) {
          return result
        }
      }
      return null

• transform階段：遍歷plugin執(zhí)行hook, 有結(jié)果就返回，沒有返回null

for (const plugin of plugins) {
        if (!plugin.transform) continue
        ctx._activePlugin = plugin
        ctx._activeId = id
        ctx._activeCode = code
        let result
        try {
          result = await plugin.transform.call(ctx as any, code, id, ssr)
        } catch (e) {
          ctx.error(e)
        }
        if (!result) continue
     
        if (typeof result === 'object') {
          code = result.code || ''
          if (result.map) ctx.sourcemapChain.push(result.map)
        } else {
          code = result
        }
      }
// 返回code及對應(yīng)的sourcemap
      return {
        code,
        map: ctx._getCombinedSourcemap()
      }

• watchChange：遍歷plugin執(zhí)行hook

for (const plugin of plugins) {
  if (!plugin.watchChange) continue
      ctx._activePlugin = plugin
      plugin.watchChange.call(ctx as any, id, { event })
 }

• close: 按照先后順序執(zhí)行buildEnd ，closeBundle hook， 配置close狀態(tài)位

if (closed) return
      const ctx = new Context()
      await Promise.all(
        plugins.map((p) => p.buildEnd && p.buildEnd.call(ctx as any))
      )
      await Promise.all(
        plugins.map((p) => p.closeBundle && p.closeBundle.call(ctx as any))
      )
      closed = true
 }

總結(jié)

插件容器針對插件提供了統(tǒng)一的管理和調(diào)用方案，在每個階段調(diào)用并傳遞對應(yīng)上下文。