VUE模板编译

  • A+
所属分类:前端工程

这个软件包是自动生成的。请参阅src / platforms / web / entry-compiler.js。

该包可用于将Vue 2.0模板预编译为渲染函数,以避免运行时编译开销和CSP限制。如果您正在编写具有特定需求的构建工具,则只需要它。在大多数情况下,您应该使用vue-loader或vueify替代,两者都在内部使用此包。

安装

npm install vue-template-compiler
const compiler = require('vue-template-compiler')

API

compiler.compile(template,[options])
编译模板字符串并返回已编译的JavaScript代码。返回的结果是以下格式的对象:

{
  ast: ?ASTElement, // parsed template elements to AST
  render: string, // main render function code
  staticRenderFns: Array<string>, // render code for static sub trees, if any
  errors: Array<string> // template syntax errors, if any
}

注意返回的功能代码使用with,因此不能在严格的模式代码中使用。

选项

可以挂钩编译过程来支持自定义模板功能。但是,请注意,通过注入自定义编译时模块,您的模板将不能与其他构建于标准内置模块(例如vue-loaderand)的构建工具一起使用vueify。

可选options对象可以包含以下内容:
* modules

一组编译器模块。有关编译器模块的详细信息,请参阅流程声明中的ModuleOptions类型和内置模块。
* directives

一个对象,其中键是指令名称,值是转换模板AST节点的函数。例如:

compiler.compile('<div v-test></div>', {
  directives: {
    test (node, directiveMeta) {
      // transform node based on directiveMeta
    }
  }
})

默认情况下,编译时指令将提取指令,并且指令不会在运行时出现。如果您希望指令也由运行时定义处理,请true在转换函数中返回。

参考一些内置的编译时指令的实现。

  • preserveWhitespace

    默认为true。这意味着编译后的渲染函数会保留HTML标签之间的所有空白字符。如果设置为false,标签之间的空白将被忽略。这可能会使性能稍微好一些,但可能会影响内联元素的布局。

compiler.compileToFunctions(模板)

类似于compiler.compile,但直接返回实例化的函数:

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

这在运行时仅适用于预配置构建,因此它不接受任何编译时选项。另外,这种方法使用的new Function()不是CSP兼容的。

来源:https://www.npmjs.com/package/vue-template-compiler

  • 公众号
  • 扫一扫
  • weinxin
  • 打赏
  • 扫一扫
  • weinxin

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: