mpvue template compiler 中文版教程

| 这个包是自动生成的，拉取需求请查看：src/platforms/mp/entry-compiler.js.

此包可用来将 Vue 2.0 的模板预编译成渲染函数，以避免运行时编译的开销和CSP（网页安全政策）的限制。当你正在编写具有特定需求的构建工具时，才会需要它。大多数情况下，你应该使用 mpvue-loader，两者都在内部使用了此包。

安装

npm install mpvue-template-compiler

const compiler = require('mpvue-template-compiler')

API

compiler.compile(template, [options])

编译模板字符串并返回已编译的JavaScript代码。 返回结果是以下格式的对象：

{
   ast: ?ASTElement,  // 将模板元素解析为AST（抽象语法树）
   render: string,  // 主渲染函数代码
   staticRenderFns: Array<string>,  // 静态子树的渲染代码（如有）
   errors: Array<string>  // 模板语法错误（如有）
}
复制代码

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

Options

可以钩入编译过程以支持自定义模板功能。但是请注意，通过注入自定义编译时模块，你的模板将无法与基于标准内置模块构建的其他构建工具一起使用，例如 mpvue-loader 和 vueify 。

可选的 options 对象可以包含以下内容：

• modules

一组编译器模块。详细信息，请参阅 flow declarations 和 built-in modules 中的 ModuleOptions 类型。

• directives

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

js compiler.compile('<div v-test></div>', { directives: { test (node, directiveMeta) { // 基于directiveMeta的转换节点 } })

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

请参阅一些内置编译时指令的实现 built-in compile-time directives。

• preserveWhitespace

默认为 true 。这意味着编译的渲染函数接受HTML标记之间的所有空格。如果设置为 false ，则将忽略标记之间的所有空格。这可以带来稍微更好的性能，但可能会影响内联元素的布局。

---

compiler.compileToFunctions(template)

与 compiler.compile 类似，但直接返回实例化的函数：

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

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

---

compiler.ssrCompile(template, [options])

| 2.4.0+

与 compiler.compile 相同，但通过将模板的各部分优化为字符串连接，来生成特定的SSR渲染函数代码，以提高SSR性能。

这在 vue-loader@>=12 中默认使用，并且可以使用 optimizeSSR 选项禁用。

---

compiler.ssrCompileToFunction(template)

| 2.4.0+

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

---

compiler.parseComponent(file, [options])

将SFC（单文件组件或 *.vue 文件）解析为描述符（请参阅 flow declarations 中的 SFCDescriptor 类型）。这用于SFC构建工具，如 vue-loader 和 vueify 。

Options

**pad**

当你将提取的内容传送到其他预处理器时， pad 非常有用，因为如果有任何语法错误，你会知道正确的行号或字符索引。

• 使用 { pad：“line” } ，每个块的提取内容将以原始文件的前导内容中每行的一个换行符为前缀，以确保行号与原始文件相符。

• 使用 { pad：“space” } ，每个块的提取内容将为原始文件的前导内容中的每个字符添加一个空格，以确保字符计数与原始文件保持一致。

---

compiler.compileToWxml(compiled, [options])

将AST（抽象语法树）解析为字符串，该字符串是WXML（WeiXin标记语言）文件的字符串类型。这是在使用函数 compiler.compile(template，[options]) 编译成AST的模板之后使用的。

compiled

compiled是 compiler.compile 的结果，使用此函数可以编译 模板 字符串。

Options

• 组件：components 是一个对象，包含了模板中组件的属性，参数 compiled也来源于此。如果在编译之前，在vue文件中声明了组件，则必须使用 components 。 components 的结构可能是这样的：{componentA：{src：'/ components / coma'，name：'componentA'}，componentB：{src：'/ components / comb'，name：'componentB'}}

• 模块Id：组件的唯一标识符。使用 moduleId 可以只注入组件名称，当在 [css scoped] 或 [css modules] 中使用它时，组件的样式不会被覆盖。

转载于:https://juejin.im/post/5ba5bbca5188255c5b5c37fb