[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
      }
  1. 如果有配置acornInjectPlugins:那就合并进acore的parser中:
if (options.acornInjectPlugins) {
        parser = acorn.Parser.extend(
          ...[
            acornClassFields,
            acornStaticClassFeatures,
            acornNumericSeparator
          ].concat(options.acornInjectPlugins)
        )
      }
  1. 返回包含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
 }

总结

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

你可能感兴趣的:([vite源码解析]插件篇)