vue-template-compiler

vue-template-compiler

这个包是自动生成的，请参阅 https://github.com/vuejs/vue/blob/dev/src/platforms/web/entry-compiler.js
这个包可用于将Vue 2.0模板预编译为呈现函数，以避免运行时编译开销和CSP限制。在大多数情况下，应该将它与vue-loader一起使用，只有在编写具有非常特定需求的构建工具时才会单独使用它。
在 vue 工程中，安装依赖时，需要 vue 和 vue-template-compiler 版本必须保持一致

相关资料
npm： https://www.npmjs.com/package/vue-template-compiler
github：https://github.com/vuejs/vue/tree/v2.6.10/packages/vue-template-compiler
内容安全策略 (CSP)：https://developer.mozilla.org/zh-CN/docs/Web/Security/CSP

安装

npm install vue-template-compiler

API (使用示例🌰)

https://github.com/vuejs/vue/tree/v2.6.10/packages/vue-template-compiler#api
compiler.compile(template, [options])

const compiler = require('vue-template-compiler')
const result = compiler.compile(`
  <div id="test">
    <p>测试内容</p>
    <p>{{test}}</p>
  </div>`
)
console.log(result)

编译模板字符串并返回编译后的JavaScript代码。返回的结果是一个对象的格式如下:

{
  ast: ASTElement, // 解析模板生成的AST
  render: string,    // 渲染函数
  staticRenderFns: Array<string>, // 静态子树
  errors: Array<string>, //模板语法错误，如果有的话
  tips: Array<string>
}

注意，返回的函数代码使用，因此不能在严格模式代码中使用。

compiler.compileToFunctions(template) 类似于compiler.compile，但是直接返回实例化的函数，即简化版的 compiler.compile() ，只返回

{
  render: Function,
  staticRenderFns: Array<Function>
}

注意：这只在预配置的构建运行时有用，所以它不接受任何编译时选项。此外，该方法使用new Function()，因此它不符合CSP。

compiler.ssrCompile(template, [options])
与compiler.compile相同，但通过将模板的部分优化为字符串连接来生成特定于SSR的呈现函数代码，以提高SSR性能。
这在vue-loader 版本12.0.0 以上中默认使用，可以使用optimizeSSR选项禁用。

compiler.ssrCompileToFunctions(template)
与compiler.compileToFunction相同，但通过将模板的部分优化为字符串连接来生成特定于SSR的呈现函数代码，以提高SSR性能。

compiler.parseComponent(file, [options])
将 SFC （单文件组件或* .vue文件）解析为描述符（在流声明中引用SFCDescriptor类型）「以下述提供SFC为例」通常用于 SFC 构建工具，如 vue-loader和vueify等

{
  template: {
    type: 'template',
    content: '\n<div class="example">{{ msg }}</div>\n',
    start: 10,
    attrs: {},
    end: 54
  },
  script: {
    type: 'script',
    content: '\n' +
      'export default {\n' +
      '  data () {\n' +
      '    return {\n' +
      "      msg: 'Hello world!'\n" +
      '    }\n' +
      '  }\n' +
      '}\n',
    start: 77,
    attrs: {},
    end: 174
  },
  styles: [
    {
      type: 'style',
      content: '\n.example {\n  color: red;\n}\n',
      start: 194,
      attrs: {},
      end: 236
    }
  ],
  customBlocks: [
    {
      type: 'custom1',
      content: '自定义块',
      start: 257,
      attrs: {},
       end: 261
    }
  ],
  errors: []
}

compiler.generateCodeFrame(template, start, end)
生成一个代码框架，突出显示由start和end定义的模板中的部分。对于高级工具中的错误报告非常有用。

compiler.generateCodeFrame(`上述代码`, 15, 20)
1  |  <template>
2  |      <div class="example">{{ msg }}</div>
   |      ^^^^^
3  |    </template>

解析过程

// 生成ast语法树
const ast = parse(template.trim(), options)
// 标记静态内容（以免diff的时候需要重复比较）
optimize(ast, options)
// 生成 render function code
const code = generate(ast, options)