[vite源码解析]插件篇

vite的插件基于rollup，在本地服务生成是会同事创建插件容器，按顺序针对插件中的hook做批量调用，当前支持的hook有（区分构建和开发）：

• 通用hook
  |hook名称|触发时机|
  |---|---|
  |options|服务器启动时被调用|
  |buildStart|服务器启动时被调用|
  |resolveId|每个传入模块请求时被调用|
  |load|每个传入模块请求时被调用|
  |transform|每个传入模块请求时被调用|
  |buildEnd|服务器关闭时被调用|
  |closeBundle|服务器关闭时被调用|

• vite独有hook

下一个问题，vite是如何实现插件的设计的？答案我们从createPluginContainer里面找

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

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

createPluginContainer传入2个参数：

• resolveConfig配置：包含了plugins，logger， root， build（包含rollupOptions），这里实际对应的就是创建server的config，只不过用resolveConfig函数解析了下。
• watcher：文件监控器，在创建server的时候调用的是chokidar实例来实现

返回的就是PluginContainer。
函数体其中也包含很多内容

function warnIncompatibleMethod(method: string, plugin: string){}
// 针对每个异步pipeline都创建一个上下文来跟踪多pipeline下追踪到当前激活的插件
class Context implements PluginContext {}

function formatError(){}

class TransformContext extends Context 

const container: PluginContainer 

return container

在这里我们看到上面的主要container就是pluginContainer，我们具体来看看里面包含哪些内容：

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的调用（buildStart,resolveId,load,transform）,变化监控同步函数watchChange，以及最后的close方法。下面我们来逐个拆解：

• options异步函数解析：

1. 将每个插件里的options方法执行了一遍

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

2. 如果有配置acornInjectPlugins：那就合并进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把所有插件里面但凡有该配置的都执行下

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执行对应钩子：

for (const plugin of plugins) {
 // 没有就跳过
        if (!plugin.resolveId) continue
// 如果在跳过的列表里面，也跳过
        if (skips?.has(plugin)) continue
// 将该插件设置为当前激活插件
        ctx._activePlugin = plugin
// 开始调用方法
        const result = await plugin.resolveId.call(
          ctx as any,
          rawId,
          importer,
          {},
          ssr
        )
// 如果没结果就跳过到下一个
        if (!result) continue
// 如果结果为string，那结果就是对应的id
        if (typeof result === 'string') {
           id = result
        } else {
// 如果不是那就是object对象，找到对应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执行hook, 有结果就返回，没有返回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执行hook, 有结果就返回，没有返回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及对应的sourcemap
      return {
        code,
        map: ctx._getCombinedSourcemap()
      }

---

• watchChange：遍历plugin执行hook

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

---

• close: 按照先后顺序执行buildEnd ，closeBundle hook， 配置close状态位

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
 }

---

总结

插件容器针对插件提供了统一的管理和调用方案，在每个阶段调用并传递对应上下文。