深入分析 Vue 3 源码中 `compiler-sfc` (SFC 编译器) 如何将 “, “, “ 块解析、转换并合并为单个 JavaScript 模块。

同学们，早上好！欢迎来到 Vue 3 SFC 编译器深度解析讲座。今天咱们要扒的是 Vue 3 源码里最神秘但也最核心的部分之一：compiler-sfc，也就是单文件组件（SFC）编译器。简单来说，它就是个魔法师，能把 .vue 文件里那些 <template>、<script>、<style> 块，像揉面一样，揉成一个 JavaScript 模块。

准备好了吗？咱们这就开整！

一、SFC 编译器的职责：化繁为简的艺术

先来明确下 compiler-sfc 的工作职责，它主要负责以下几件事：

解析（Parsing）： 将 .vue 文件的文本内容分解成抽象语法树（AST）。这就像把一篇文章拆成一个个句子、单词。
转换（Transforming）： 对 AST 进行各种优化和修改，比如处理指令、绑定等。这就像润色文章，让它更流畅。
代码生成（Code Generation）： 根据转换后的 AST 生成最终的 JavaScript 代码。这就像把润色后的文章发布出去。
样式处理（Style Handling）： 处理 <style> 块，包括 CSS 提取、作用域 CSS 等。这就像给文章配上漂亮的排版。

用一张表格概括一下：

阶段	描述	输入	输出	关键模块
解析	将 SFC 文件解析成 AST	`.vue` 文件内容	SFCDescriptor	`@vue/compiler-dom` (HTML/Text 解析)
转换	对 AST 进行转换和优化	SFCDescriptor	TransformResult	`@vue/compiler-core` (核心转换逻辑)
代码生成	根据转换后的 AST 生成 JavaScript 代码	TransformResult	JavaScript 代码	`@vue/compiler-core` (代码生成器)
样式处理	处理 `<style>` 块	SFCDescriptor	CSS 代码	`@vue/compiler-sfc` (特定于 SFC 的样式处理)

二、源码导览：拨开迷雾见真章

compiler-sfc 的源码结构比较复杂，但我们可以抓住几个关键入口：

compileSFC 函数： 这是 SFC 编译的入口函数，负责协调整个编译流程。
parse 函数： 负责解析 .vue 文件，生成 SFCDescriptor 对象。
transform 函数： 负责转换 SFCDescriptor 对象，进行各种优化和修改。
generate 函数： 负责根据转换后的结果生成 JavaScript 代码。

咱们先从 compileSFC 开始，看看它做了些什么：

// @vue/compiler-sfc/src/compileTemplate.ts

import { parse as vueParse } from '@vue/compiler-dom'
import { parse as descriptorParse } from './parser'
import { transform as descriptorTransform } from './transform'
import { generate as descriptorGenerate } from './codegen'

export function compileSFC(
  source: string,
  options: SFCOptions = {}
): SFCCompileResult {
  // 1. 解析 SFC 文件
  const descriptor = descriptorParse(source, options)

  // 2. 转换 SFCDescriptor
  const result = descriptorTransform(descriptor, options)

  // 3. 生成代码
  const code = descriptorGenerate(result, options)

  return {
    descriptor,
    result,
    code,
  }
}

这段代码非常简单，就是依次调用 parse、transform 和 generate 函数，完成 SFC 的编译。

三、解析阶段：庖丁解牛的艺术

接下来，咱们深入解析阶段，看看 parse 函数是如何把 .vue 文件拆解成 SFCDescriptor 对象的。

// @vue/compiler-sfc/src/parser.ts

import { parse as vueParse } from '@vue/compiler-dom'

export interface SFCDescriptor {
  template: SFCBlock | null
  script: SFCBlock | null
  scriptSetup: SFCBlock | null
  styles: SFCBlock[]
  customBlocks: SFCBlock[]
  errors: Error[]
}

export interface SFCBlock {
  type: 'template' | 'script' | 'style' | 'custom'
  content: string
  loc: SourceLocation
  attrs: Record<string, string | true>
  lang?: string
  src?: string
  scoped?: boolean
  module?: string | boolean
}

export function parse(
  source: string,
  options: SFCParseOptions = {}
): SFCDescriptor {
  const descriptor: SFCDescriptor = {
    template: null,
    script: null,
    scriptSetup: null,
    styles: [],
    customBlocks: [],
    errors: [],
  }

  const ast = vueParse(source, options);

  // 遍历 AST，提取 template、script、style 等块
  for (const node of ast.children) {
    if (node.type === NodeTypes.ELEMENT) {
      const element = node as ElementNode
      const tag = element.tag

      if (tag === 'template') {
        descriptor.template = processTemplate(element, source)
      } else if (tag === 'script') {
        descriptor.script = processScript(element, source)
      } else if (tag === 'style') {
        descriptor.styles.push(processStyle(element, source))
      } else {
        descriptor.customBlocks.push(processCustomBlock(element, source))
      }
    }
  }

  return descriptor
}

parse 函数的主要工作是：

使用 @vue/compiler-dom 提供的 parse 函数（vueParse）将 .vue 文件的内容解析成一个 HTML AST。
遍历 HTML AST 的子节点，找到 <template>、<script>、<style> 等标签。
针对不同的标签，调用 processTemplate、processScript、processStyle 等函数进行处理，提取标签的内容、属性等信息，并封装成 SFCBlock 对象。
将提取到的 SFCBlock 对象存储到 SFCDescriptor 对象中。

SFCDescriptor 对象就像一个容器，包含了 .vue 文件中所有重要的信息。

四、转换阶段：点石成金的魔法

解析完成之后，就到了转换阶段。 transform 函数负责对 SFCDescriptor 对象进行各种优化和修改，为代码生成阶段做准备。

// @vue/compiler-sfc/src/transform.ts

import { transformTemplate } from './transformTemplate'
import { transformScript } from './transformScript'
import { transformStyle } from './transformStyle'
import { SFCDescriptor } from './parser'

export interface TransformResult {
  template: TemplateTransformResult | null
  script: ScriptTransformResult | null
  scriptSetup: ScriptTransformResult | null
  styles: StyleTransformResult[]
}

export function transform(
  descriptor: SFCDescriptor,
  options: TransformOptions = {}
): TransformResult {
  const result: TransformResult = {
    template: null,
    script: null,
    scriptSetup: null,
    styles: [],
  }

  // 转换 template
  if (descriptor.template) {
    result.template = transformTemplate(descriptor.template, options)
  }

  // 转换 script
  if (descriptor.script) {
    result.script = transformScript(descriptor.script, options)
  }

  // 转换 script setup
  if (descriptor.scriptSetup) {
    result.scriptSetup = transformScript(descriptor.scriptSetup, options)
  }

  // 转换 style
  for (const style of descriptor.styles) {
    result.styles.push(transformStyle(style, options))
  }

  return result
}

transform 函数的主要工作是：

根据 SFCDescriptor 对象中的 template、script、style 等块，分别调用 transformTemplate、transformScript、transformStyle 等函数进行处理。
transformTemplate 负责处理 <template> 块，将模板编译成渲染函数。
transformScript 负责处理 <script> 块，提取组件选项、处理 export default 等。
transformStyle 负责处理 <style> 块，添加作用域 CSS、提取 CSS 等。
将转换后的结果存储到 TransformResult 对象中。

这里面最复杂的部分是 transformTemplate，它涉及到模板编译的整个流程，包括解析、优化、代码生成等。

五、代码生成阶段：妙笔生花的时刻

经过解析和转换之后，就到了代码生成阶段。 generate 函数负责根据 TransformResult 对象生成最终的 JavaScript 代码。

// @vue/compiler-sfc/src/codegen.ts

import { TemplateTransformResult } from './transformTemplate'
import { ScriptTransformResult } from './transformScript'
import { StyleTransformResult } from './transformStyle'
import { TransformResult } from './transform'

export function generate(
  result: TransformResult,
  options: GenerateOptions = {}
): string {
  let code = ''

  // 生成 template 渲染函数
  if (result.template) {
    code += generateTemplate(result.template, options)
  }

  // 生成 script 代码
  if (result.script) {
    code += generateScript(result.script, options)
  }

  // 生成 style 代码
  for (const style of result.styles) {
    code += generateStyle(style, options)
  }

  // 合并 template、script、style 代码
  code = mergeCode(code, result, options)

  return code
}

generate 函数的主要工作是：

根据 TransformResult 对象中的 template、script、style 等块，分别调用 generateTemplate、generateScript、generateStyle 等函数生成对应的代码。
generateTemplate 负责生成模板渲染函数的代码。
generateScript 负责生成组件选项的代码。
generateStyle 负责生成 CSS 代码。
将生成的代码合并成一个 JavaScript 模块。

六、样式处理：独具匠心的设计

compiler-sfc 对 <style> 块的处理也很有特色，它主要负责以下几件事：

作用域 CSS： 为 <style scoped> 块添加属性选择器，实现组件级别的样式隔离。
CSS Modules： 支持 <style module> 块，将 CSS 类名映射到 JavaScript 对象，方便在组件中使用。
CSS 提取： 可以将 <style> 块中的 CSS 代码提取到单独的文件中，提高性能。

// @vue/compiler-sfc/src/transformStyle.ts

import { SFCBlock } from './parser'

export interface StyleTransformResult {
  code: string
  map: SourceMap | null
  errors: Error[]
  modules?: Record<string, string>
}

export function transformStyle(
  style: SFCBlock,
  options: TransformOptions = {}
): StyleTransformResult {
  const result: StyleTransformResult = {
    code: style.content,
    map: null,
    errors: [],
  }

  // 处理作用域 CSS
  if (style.scoped) {
    result.code = applyScopedCSS(result.code, options.id)
  }

  // 处理 CSS Modules
  if (style.module) {
    result.modules = generateCSSModules(result.code, style.module)
  }

  return result
}

transformStyle 函数的主要工作是：

处理 <style scoped> 块，调用 applyScopedCSS 函数添加作用域 CSS。
处理 <style module> 块，调用 generateCSSModules 函数生成 CSS Modules。

七、总结：温故而知新

咱们今天一起深入分析了 Vue 3 SFC 编译器的核心流程，包括解析、转换、代码生成和样式处理。简单总结如下：

解析阶段： 将 .vue 文件解析成 SFCDescriptor 对象，提取 template、script、style 等块。
转换阶段： 对 SFCDescriptor 对象进行各种优化和修改，将模板编译成渲染函数，处理组件选项、作用域 CSS 等。
代码生成阶段： 根据转换后的结果生成最终的 JavaScript 代码。
样式处理： 处理 <style> 块，包括作用域 CSS、CSS Modules、CSS 提取等。

通过这次源码分析，希望大家对 Vue 3 SFC 编译器有了更深入的了解。以后再写 .vue 文件的时候，就能更加得心应手啦！

八、彩蛋：一些思考与展望

SFC 编译器是 Vue 3 的核心组成部分，它的设计和实现对 Vue 3 的性能、开发体验等方面都有着重要的影响。随着 Web 技术的不断发展，SFC 编译器也在不断进化。比如，Vue 3.2 引入了 <script setup> 语法糖，极大地简化了组件的编写。未来，SFC 编译器可能会朝着更智能、更高效的方向发展，比如：

更强大的类型检查： 在编译时进行更严格的类型检查，减少运行时错误。
更智能的代码优化： 根据组件的特性进行更智能的代码优化，提高性能。
更好的 IDE 支持： 提供更好的 IDE 支持，比如自动补全、错误提示等。

希望大家能够持续关注 Vue 3 的发展，一起探索 SFC 编译器的更多可能性！

今天的讲座就到这里，谢谢大家！咱们下期再见！

发表回复 取消回复

发表回复取消回复