• 编译入口
    • 总结

    编译入口

    当我们使用 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