安装 - 预编译模板
使用 Handlebars 预编译器,你可以预编译 Handlebars 模板以节省客户端时间并减少 Handlebars 库所需的运行时大小。
入门
首先,你需要 Node.js 和 npm 。转到 https://nodejs.org/en/download/ 了解如何在你的操 作系统上执行此操作。
接下来,安装 Handlebars npm 软件包,其中包含了预编译器。
npm install -g handlebars
创建一个文件 example.handlebars
来包含模板:
Handlebars <b>{{doesWhat}}</b> precompiled!
运行预编译器。
handlebars example.handlebars -f example.precompiled.js
引用 Handlebars 运行时和预编译的 JavaScript。
<div id="output"></div>
<script src="https://cdn.jsdelivr.net/npm/handlebars@latest/dist/handlebars.runtime.js"></script>
<script src="example.precompiled.js"></script>
<script>
var template = Handlebars.templates.example;
document.getElementById('output').innerHTML = template({doesWhat: 'rocks!'})
</script>
也可以在 安装页面 上下载运行时。
优化
因为你在预编译模板,所以你还可以对编译器进行多种优化。首先你可以指定一个已知 helper 的列表:
handlebars <input> -f <output> -k each -k if -k unless
Handlebars 编译器将优化对这些 helper 的访问以提高性能。当所有 helper 都在编译时时候,--knownOnly
选项提供了最小的生成 代码,也提供了最快的执行速度。
用法
Precompile handlebar templates.
handlebars [template|directory]...
Options:
-f, --output Output File
--map Source Map File [string] [default: undefined]
-a, --amd Exports amd style (require.js)
-c, --commonjs Exports CommonJS style, path to Handlebars module [default: null]
-h, --handlebarPath Path to handlebar.js (only valid for amd-style) [default: ""]
-k, --known Known helpers
-o, --knownOnly Known helpers only
-m, --min Minimize output
-n, --namespace Template namespace [default: "Handlebars.templates"]
-s, --simple Output template function only.
-N, --name Name of passed string templates. Optional if running in a simple mode. Required when operating
on multiple templates.
-i, --string Generates a template from the passed CLI argument.
"-" is treated as a special value and causes stdin to be read for the template value.
-r, --root Template root. Base value that will be stripped from template names.
-p, --partial Compiling a partial template
-d, --data Include data when compiling
-e, --extension Template extension. [default: "handlebars"]
-b, --bom Removes the BOM (Byte Order Mark) from the beginning of the templates.
-v, --version Prints the current compiler version
--help Outputs this message
如果使用预编译器的 normal 模式,则预编译结果将存储到 Handlebars.templates 对象下对应的模板名称(不带扩展名)的对象中。这 些预编译模板可以以和普通模板相同的方式执行。如果使用 simple 模式,预编译器将生成一个 JavaScript 方法。要执行此方法,必须 将其传递给 Handlebars.template 方法,生成的对象也可以以相同的方式使用。
在 NodeJS 中预编译模板
如果你希望从 NodeJS 内部预编译模板而无需从命令行调用 Handlebars,则可以使用 Handlebars.precompile 完成。将此函数的字符串 结果传递给你的前端,前端即可使用 Handlebars.template 来解析。
let template = "Handlebars <b>{{doesWhat}}</b> precompiled!";
let Handlebars = require("handlebars");
let compiled = Handlebars.precompile(template);
console.log(compiled);
输出如下:
{"compiler":[8,">= 4.3.0"],"main":function(container,depth0,helpers,partials,data) {
var helper, alias1=container.propertyIsEnumerable;
return "Handlebars <b>"
+ container.escapeExpression(((helper = (helper = helpers.doesWhat || (depth0 != null ? depth0.doesWhat : depth0)) != null ? helper : container.hooks.helperMissing),(typeof helper === "function" ? helper.call(depth0 != null ? depth0 : (container.nullContext || {}),{"name":"doesWhat","hash":{},"data":data}) : helper)))
+ "</b> precompiled!";
},"useData":true}
在客户端,你将通过以下方式使用 JavaScript。
Handlebars.partials["test1"] = Handlebars.template({
/** 在此处插入编译的输出 **/
});
最后,你可以在 JavaScript 中动态引用这些模板。
var result = Handlebars.partials["test1"]({ name: "yourname" });
// 使用得到的 result
集成
一些 npm 包可用于将 Handlebars 预编译器集成到你的构建系统中(如 Webpack, Browserify ...)。参阅 集成 页面: