| 這個(gè)包是自動(dòng)生成的，拉取需求請(qǐng)查看：src/platforms/mp/entry-compiler.js.

此包可用來將 Vue 2.0 的模板預(yù)編譯成渲染函數(shù)，以避免運(yùn)行時(shí)編譯的開銷和CSP（網(wǎng)頁安全政策）的限制。當(dāng)你正在編寫具有特定需求的構(gòu)建工具時(shí)，才會(huì)需要它。大多數(shù)情況下，你應(yīng)該使用 mpvue-loader，兩者都在內(nèi)部使用了此包。

安裝

npm install mpvue-template-compiler

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

API

compiler.compile(template, [options])

編譯模板字符串并返回已編譯的JavaScript代碼。 返回結(jié)果是以下格式的對(duì)象：

{ast: ?ASTElement, // 將模板元素解析為AST（抽象語法樹）render: string, // 主渲染函數(shù)代碼staticRenderFns: Array<string>, // 靜態(tài)子樹的渲染代碼（如有）errors: Array<string> // 模板語法錯(cuò)誤（如有） } 復(fù)制代碼

請(qǐng)注意返回的函數(shù)代碼使用了 with ，因此不能在嚴(yán)格模式下使用。

Options

可以鉤入編譯過程以支持自定義模板功能。但是請(qǐng)注意，通過注入自定義編譯時(shí)模塊，你的模板將無法與基于標(biāo)準(zhǔn)內(nèi)置模塊構(gòu)建的其他構(gòu)建工具一起使用，例如 mpvue-loader 和 vueify 。

可選的 options 對(duì)象可以包含以下內(nèi)容：

• modules

一組編譯器模塊。詳細(xì)信息，請(qǐng)參閱 flow declarations 和 built-in modules 中的 ModuleOptions 類型。

• directives

一個(gè)對(duì)象，其中鍵是指令名稱，值是轉(zhuǎn)換模板AST節(jié)點(diǎn)的函數(shù)。例如：

js compiler.compile('<div v-test></div>', { directives: { test (node, directiveMeta) { // 基于directiveMeta的轉(zhuǎn)換節(jié)點(diǎn) } })

默認(rèn)情況下，編譯時(shí)指令會(huì)提取指令，并且該指令將不會(huì)出現(xiàn)在運(yùn)行時(shí)。如果希望指令也由運(yùn)行時(shí)定義處理，則在轉(zhuǎn)換函數(shù)中返回 true 。

請(qǐng)參閱一些內(nèi)置編譯時(shí)指令的實(shí)現(xiàn) built-in compile-time directives。

• preserveWhitespace

默認(rèn)為 true 。這意味著編譯的渲染函數(shù)接受HTML標(biāo)記之間的所有空格。如果設(shè)置為 false ，則將忽略標(biāo)記之間的所有空格。這可以帶來稍微更好的性能，但可能會(huì)影響內(nèi)聯(lián)元素的布局。

---

compiler.compileToFunctions(template)

與 compiler.compile 類似，但直接返回實(shí)例化的函數(shù)：

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

這僅在使用預(yù)配置構(gòu)建的運(yùn)行時(shí)有作用，因此它不接受任何編譯時(shí)選項(xiàng)。此外，此方法使用 new Function() ，因此它不適用于CSP。

---

compiler.ssrCompile(template, [options])

| 2.4.0+

與 compiler.compile 相同，但通過將模板的各部分優(yōu)化為字符串連接，來生成特定的SSR渲染函數(shù)代碼，以提高SSR性能。

這在 vue-loader@>=12 中默認(rèn)使用，并且可以使用 optimizeSSR 選項(xiàng)禁用。

---

compiler.ssrCompileToFunction(template)

| 2.4.0+

與 compiler.compileToFunction 相同，但通過將模板的各部分優(yōu)化為字符串連接，來生成特定的SSR渲染函數(shù)代碼，以提高SSR性能。

---

compiler.parseComponent(file, [options])

將SFC（單文件組件或 *.vue 文件）解析為描述符（請(qǐng)參閱 flow declarations 中的 SFCDescriptor 類型）。這用于SFC構(gòu)建工具，如 vue-loader 和 vueify 。

Options

**pad**

當(dāng)你將提取的內(nèi)容傳送到其他預(yù)處理器時(shí)， pad 非常有用，因?yàn)槿绻腥魏握Z法錯(cuò)誤，你會(huì)知道正確的行號(hào)或字符索引。

• 使用 { pad：“l(fā)ine” } ，每個(gè)塊的提取內(nèi)容將以原始文件的前導(dǎo)內(nèi)容中每行的一個(gè)換行符為前綴，以確保行號(hào)與原始文件相符。

• 使用 { pad：“space” } ，每個(gè)塊的提取內(nèi)容將為原始文件的前導(dǎo)內(nèi)容中的每個(gè)字符添加一個(gè)空格，以確保字符計(jì)數(shù)與原始文件保持一致。

---

compiler.compileToWxml(compiled, [options])

將AST（抽象語法樹）解析為字符串，該字符串是WXML（WeiXin標(biāo)記語言）文件的字符串類型。這是在使用函數(shù) compiler.compile(template，[options]) 編譯成AST的模板之后使用的。

compiled

compiled是 compiler.compile 的結(jié)果，使用此函數(shù)可以編譯 模板 字符串。

Options

• 組件：components 是一個(gè)對(duì)象，包含了模板中組件的屬性，參數(shù) compiled也來源于此。如果在編譯之前，在vue文件中聲明了組件，則必須使用 components 。 components 的結(jié)構(gòu)可能是這樣的：{componentA：{src：'/ components / coma'，name：'componentA'}，componentB：{src：'/ components / comb'，name：'componentB'}}

• 模塊Id：組件的唯一標(biāo)識(shí)符。使用 moduleId 可以只注入組件名稱，當(dāng)在 [css scoped] 或 [css modules] 中使用它時(shí)，組件的樣式不會(huì)被覆蓋。

轉(zhuǎn)載于:https://juejin.im/post/5ba5bbca5188255c5b5c37fb

總結(jié)

以上是生活随笔為你收集整理的mpvue template compiler 中文版教程的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。