vue-loader 源码解析系列之 selector

摘要：当前正在处理的节点，以及该节点的和等信息。源码解析之一整体分析源码解析之三写作中源码解析之四写作中作者博客作者作者微博

笔者系 vue-loader 贡献者之一（#16）

vue-loader 源码解析系列之一，阅读该文章之前，请大家首先参考大纲 vue-loader 源码解析系列之 整体分析

const path = require("path")
const parse = require("./parser")
const loaderUtils = require("loader-utils")

module.exports = function (content) {
  // 略
  const query = loaderUtils.getOptions(this) || {}
  // 略
  const parts = parse(content, filename, this.sourceMap, sourceRoot, query.bustCache)
  let part = parts[query.type]
  // 略
  this.callback(null, part.content, part.map)
}

大家可以看到，selector的代码非常简单，
通过 parser 将 .vue 解析成对象 parts, 里面分别有 style, script, template。可以根据不同的 query, 返回对应的部分。
很明显那么这个 parser 完成了分析分解 .vue 的工作，那么让我们继续深入 parser

const compiler = require("vue-template-compiler")
const cache = require("lru-cache")(100)

module.exports = (content, filename, needMap, sourceRoot, bustCache) => {
  const cacheKey = hash(filename + content)
  // 略
  let output = cache.get(cacheKey)
  if (output) return output
  output = compiler.parseComponent(content, { pad: "line" })
  if (needMap) {
    // 略去了生成 sourceMap 的代码
  }
  cache.set(cacheKey, output)
  return output
}

同样的，为了方便读者理解主要流程，笔者去掉了部分代码。

从上面代码可以看到，.vue 解析的工作其实是交给了 compiler.parseComponent 去完成，那么我们需要继续深入 compiler。
注意，这里 vue-template-compiler 并不是 vue-loader 的一部分，从 vue-template-compiler 的 npm 主页可以了解到， vue-template-compiler 原来是 vue 本体的一部分
并不是一个多带带的 package。通过查看文档可知，compiler.parseComponent 的逻辑在 vue/src/sfc/parser.js 里。

源码如下

/**
 * Parse a single-file component (*.vue) file into an SFC Descriptor Object.
 */
export function parseComponent (
  content: string,
  options?: Object = {}
 ): SFCDescriptor {
  const sfc: SFCDescriptor = {
    template: null,
    script: null,
    styles: [],
    customBlocks: []
  }
  let depth = 0
  let currentBlock: ?(SFCBlock | SFCCustomBlock) = null

  function start (
    tag: string,
    attrs: Array,
    unary: boolean,
    start: number,
    end: number
  ) {
    // 略
  }

  function checkAttrs (block: SFCBlock, attrs: Array) {
    // 略
  }

  function end (tag: string, start: number, end: number) {
    // 略
  }

  function padContent (block: SFCBlock | SFCCustomBlock, pad: true | "line" | "space") {
    // 略
  }

  parseHTML(content, {
    start,
    end
  })

  return sfc
}

parseComponent 里面有以下变量

处理对象 sfc

把 .vue 里的 css, javaScript, html 抽离出来之后，存放到找个这个对象里面

变量 depth

当前正在处理的节点的深度，比方说，对于 来说，处理到 foo 时，当前深度就是 3, 处理到