编译入口

当我们使用 Runtime + Compiler 的 Vue.js，它的入口是 src/platforms/web/entry-runtime-with-compiler.js，看一下它对 $mount 函数的定义：

  1. const mount = Vue.prototype.$mount
  2. Vue.prototype.$mount = function (
  3.   el?: string | Element,
  4.   hydrating?: boolean
  5. ): Component {
  6.   el = el && query(el)
  8.   /* istanbul ignore if */
  9.   if (el === document.body || el === document.documentElement) {
  10.     process.env.NODE_ENV !== 'production' && warn(
  11.       `Do not mount Vue to <html> or <body> - mount to normal elements instead.`
  12.     )
  13.     return this
  14.   }
  16.   const options = this.$options
  17.   // resolve template/el and convert to render function
  18.   if (!options.render) {
  19.     let template = options.template
  20.     if (template) {
  21.       if (typeof template === 'string') {
  22.         if (template.charAt(0) === '#') {
  23.           template = idToTemplate(template)
  24.           /* istanbul ignore if */
  25.           if (process.env.NODE_ENV !== 'production' && !template) {
  26.             warn(
  27.               `Template element not found or is empty: ${options.template}`,
  28.               this
  29.             )
  30.           }
  31.         }
  32.       } else if (template.nodeType) {
  33.         template = template.innerHTML
  34.       } else {
  35.         if (process.env.NODE_ENV !== 'production') {
  36.           warn('invalid template option:' + template, this)
  37.         }
  38.         return this
  39.       }
  40.     } else if (el) {
  41.       template = getOuterHTML(el)
  42.     }
  43.     if (template) {
  44.       /* istanbul ignore if */
  45.       if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
  46.         mark('compile')
  47.       }
  49.       const { render, staticRenderFns } = compileToFunctions(template, {
  50.         shouldDecodeNewlines,
  51.         shouldDecodeNewlinesForHref,
  52.         delimiters: options.delimiters,
  53.         comments: options.comments
  54.       }, this)
  55.       options.render = render
  56.       options.staticRenderFns = staticRenderFns
  58.       /* istanbul ignore if */
  59.       if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
  60.         mark('compile end')
  61.         measure(`vue ${this._name} compile`, 'compile', 'compile end')
  62.       }
  63.     }
  64.   }
  65.   return mount.call(this, el, hydrating)
  66. }

这段函数逻辑之前分析过，关于编译的入口就是在这里：

  1. const { render, staticRenderFns } =  compileToFunctions(template, {
  2.     shouldDecodeNewlines,
  3.     shouldDecodeNewlinesForHref,
  4.     delimiters: options.delimiters,
  5.     comments: options.comments
  6.   }, this)
  7. options.render = render
  8. options.staticRenderFns = staticRenderFns

compileToFunctions 方法就是把模板 template 编译生成 render 以及 staticRenderFns，它的定义在 src/platforms/web/compiler/index.js 中：

  1. import { baseOptions } from './options'
  2. import { createCompiler } from 'compiler/index'
  4. const { compile, compileToFunctions } = createCompiler(baseOptions)
  6. export { compile, compileToFunctions }

可以看到 compileToFunctions 方法实际上是 createCompiler 方法的返回值，该方法接收一个编译配置参数，接下来我们来看一下 createCompiler 方法的定义，在 src/compiler/index.js 中：

  1. // `createCompilerCreator` allows creating compilers that use alternative
  2. // parser/optimizer/codegen, e.g the SSR optimizing compiler.
  3. // Here we just export a default compiler using the default parts.
  4. export const createCompiler = createCompilerCreator(function baseCompile (
  5.   template: string,
  6.   options: CompilerOptions
  7. ): CompiledResult {
  8.   const ast = parse(template.trim(), options)
  9.   if (options.optimize !== false) {
  10.     optimize(ast, options)
  11.   }
  12.   const code = generate(ast, options)
  13.   return {
  14.     ast,
  15.     render: code.render,
  16.     staticRenderFns: code.staticRenderFns
  17.   }
  18. })

createCompiler 方法实际上是通过调用 createCompilerCreator 方法返回的，该方法传入的参数是一个函数，真正的编译过程都在这个 baseCompile 函数里执行，那么 createCompilerCreator 又是什么呢，它的定义在 src/compiler/create-compiler.js 中：

  1. export function createCompilerCreator (baseCompile: Function): Function {
  2.   return function createCompiler (baseOptions: CompilerOptions) {
  3.     function compile (
  4.       template: string,
  5.       options?: CompilerOptions
  6.     ): CompiledResult {
  7.       const finalOptions = Object.create(baseOptions)
  8.       const errors = []
  9.       const tips = []
  10.       finalOptions.warn = (msg, tip) => {
  11.         (tip ? tips : errors).push(msg)
  12.       }
  14.       if (options) {
  15.         // merge custom modules
  16.         if (options.modules) {
  17.           finalOptions.modules =
  18.             (baseOptions.modules || []).concat(options.modules)
  19.         }
  20.         // merge custom directives
  21.         if (options.directives) {
  22.           finalOptions.directives = extend(
  23.             Object.create(baseOptions.directives || null),
  24.             options.directives
  25.           )
  26.         }
  27.         // copy other options
  28.         for (const key in options) {
  29.           if (key !== 'modules' && key !== 'directives') {
  30.             finalOptions[key] = options[key]
  31.           }
  32.         }
  33.       }
  35.       const compiled = baseCompile(template, finalOptions)
  36.       if (process.env.NODE_ENV !== 'production') {
  37.         errors.push.apply(errors, detectErrors(compiled.ast))
  38.       }
  39.       compiled.errors = errors
  40.       compiled.tips = tips
  41.       return compiled
  42.     }
  44.     return {
  45.       compile,
  46.       compileToFunctions: createCompileToFunctionFn(compile)
  47.     }
  48.   }
  49. }

可以看到该方法返回了一个 createCompiler 的函数，它接收一个 baseOptions 的参数，返回的是一个对象，包括 compile 方法属性和 compileToFunctions 属性，这个 compileToFunctions 对应的就是 $mount 函数调用的 compileToFunctions 方法，它是调用 createCompileToFunctionFn 方法的返回值，我们接下来看一下 createCompileToFunctionFn 方法，它的定义在 src/compiler/to-function/js 中：

  1. export function createCompileToFunctionFn (compile: Function): Function {
  2.   const cache = Object.create(null)
  4.   return function compileToFunctions (
  5.     template: string,
  6.     options?: CompilerOptions,
  7.     vm?: Component
  8.   ): CompiledFunctionResult {
  9.     options = extend({}, options)
  10.     const warn = options.warn || baseWarn
  11.     delete options.warn
  13.     /* istanbul ignore if */
  14.     if (process.env.NODE_ENV !== 'production') {
  15.       // detect possible CSP restriction
  16.       try {
  17.         new Function('return 1')
  18.       } catch (e) {
  19.         if (e.toString().match(/unsafe-eval|CSP/)) {
  20.           warn(
  21.             'It seems you are using the standalone build of Vue.js in an ' +
  22.             'environment with Content Security Policy that prohibits unsafe-eval. ' +
  23.             'The template compiler cannot work in this environment. Consider ' +
  24.             'relaxing the policy to allow unsafe-eval or pre-compiling your ' +
  25.             'templates into render functions.'
  26.           )
  27.         }
  28.       }
  29.     }
  31.     // check cache
  32.     const key = options.delimiters
  33.       ? String(options.delimiters) + template
  34.       : template
  35.     if (cache[key]) {
  36.       return cache[key]
  37.     }
  39.     // compile
  40.     const compiled = compile(template, options)
  42.     // check compilation errors/tips
  43.     if (process.env.NODE_ENV !== 'production') {
  44.       if (compiled.errors && compiled.errors.length) {
  45.         warn(
  46.           `Error compiling template:\n\n${template}\n\n` +
  47.           compiled.errors.map(e => `- ${e}`).join('\n') + '\n',
  48.           vm
  49.         )
  50.       }
  51.       if (compiled.tips && compiled.tips.length) {
  52.         compiled.tips.forEach(msg => tip(msg, vm))
  53.       }
  54.     }
  56.     // turn code into functions
  57.     const res = {}
  58.     const fnGenErrors = []
  59.     res.render = createFunction(compiled.render, fnGenErrors)
  60.     res.staticRenderFns = compiled.staticRenderFns.map(code => {
  61.       return createFunction(code, fnGenErrors)
  62.     })
  64.     // check function generation errors.
  65.     // this should only happen if there is a bug in the compiler itself.
  66.     // mostly for codegen development use
  67.     /* istanbul ignore if */
  68.     if (process.env.NODE_ENV !== 'production') {
  69.       if ((!compiled.errors || !compiled.errors.length) && fnGenErrors.length) {
  70.         warn(
  71.           `Failed to generate render function:\n\n` +
  72.           fnGenErrors.map(({ err, code }) => `${err.toString()} in\n\n${code}\n`).join('\n'),
  73.           vm
  74.         )
  75.       }
  76.     }
  78.     return (cache[key] = res)
  79.   }
  80. }

至此我们总算找到了 compileToFunctions 的最终定义，它接收 3 个参数、编译模板 template，编译配置 options 和 Vue 实例 vm。核心的编译过程就一行代码：

  1. const compiled = compile(template, options)

compile 函数在执行 createCompileToFunctionFn 的时候作为参数传入，它是 createCompiler 函数中定义的 compile 函数，如下：

  1. function compile (
  2.   template: string,
  3.   options?: CompilerOptions
  4. ): CompiledResult {
  5.   const finalOptions = Object.create(baseOptions)
  6.   const errors = []
  7.   const tips = []
  8.   finalOptions.warn = (msg, tip) => {
  9.     (tip ? tips : errors).push(msg)
  10.   }
  12.   if (options) {
  13.     // merge custom modules
  14.     if (options.modules) {
  15.       finalOptions.modules =
  16.         (baseOptions.modules || []).concat(options.modules)
  17.     }
  18.     // merge custom directives
  19.     if (options.directives) {
  20.       finalOptions.directives = extend(
  21.         Object.create(baseOptions.directives || null),
  22.         options.directives
  23.       )
  24.     }
  25.     // copy other options
  26.     for (const key in options) {
  27.       if (key !== 'modules' && key !== 'directives') {
  28.         finalOptions[key] = options[key]
  29.       }
  30.     }
  31.   }
  33.   const compiled = baseCompile(template, finalOptions)
  34.   if (process.env.NODE_ENV !== 'production') {
  35.     errors.push.apply(errors, detectErrors(compiled.ast))
  36.   }
  37.   compiled.errors = errors
  38.   compiled.tips = tips
  39.   return compiled
  40. }

compile 函数执行的逻辑是先处理配置参数，真正执行编译过程就一行代码：

  1. const compiled = baseCompile(template, finalOptions)

baseCompile 在执行 createCompilerCreator 方法时作为参数传入，如下：

  1. export const createCompiler = createCompilerCreator(function baseCompile (
  2.   template: string,
  3.   options: CompilerOptions
  4. ): CompiledResult {
  5.   const ast = parse(template.trim(), options)
  6.   optimize(ast, options)
  7.   const code = generate(ast, options)
  8.   return {
  9.     ast,
  10.     render: code.render,
  11.     staticRenderFns: code.staticRenderFns
  12.   }
  13. })

所以编译的入口我们终于找到了，它主要就是执行了如下几个逻辑：

  • 解析模板字符串生成 AST
  1. const ast = parse(template.trim(), options)
  • 优化语法树
  1. optimize(ast, options)
  • 生成代码
  1. const code = generate(ast, options)

那么接下来的章节我会带大家去逐步分析这几个过程。

总结

编译入口逻辑之所以这么绕，是因为 Vue.js 在不同的平台下都会有编译的过程，因此编译过程中的依赖的配置 baseOptions 会有所不同。而编译过程会多次执行，但这同一个平台下每一次的编译过程配置又是相同的，为了不让这些配置在每次编译过程都通过参数传入，Vue.js 利用了函数柯里化的技巧很好的实现了 baseOptions 的参数保留。同样，Vue.js 也是利用函数柯里化技巧把基础的编译过程函数抽出来，通过 createCompilerCreator(baseCompile) 的方式把真正编译的过程和其它逻辑如对编译配置处理、缓存处理等剥离开，这样的设计还是非常巧妙的。

原文: https://ustbhuangyi.github.io/vue-analysis/compile/entrance.html