使用Hanlebars
的预编译功能,你可以预编译你的Handlebars
模板来节省时间和减少运行时的handlebars
库的体积。
开始
首先,确保你安装了`nodejs`和`npm `.
然后,安装Handlebars
的npm
包,它里面包含了预编译器:
$ npm install -g handlebars
创建一个名为example.handlebars
的文件,将你的模板写在里面:
Handlebars <b>{{doesWhat}}</b> precompiled!
运行预编译器:
$ handlebars example.handlebars -f example.precompiled.js
在你的HTML
中引入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>
你可以在这里下载可用的运行时。
优化
因为你要预编译模板,所以你可以对编译器进行一些优化配置。首先,它允许你指定一个已知的辅助函数列表:
$ handlebars <input> -f <output> -k each -k if -k unless
Handlebars
的编译器将优化访问这些辅助函数时的性能。当在编译时知道所有辅助函数时,--knownOnly
选项将提供最小的生成代码,并提供最快的执行速度
用法说明
//命令格式
handlebars [template|directory]...
// 选项说明
Options:
-f, --output 文件输出路径
--map 源代码映射 [string] [default: undefined]
-a, --amd 以AMD规范风格导出 (require.js)
-c, --commonjs 以Commonjs风格导出 [default: null]
-h, --handlebarPath handlebar.js的路径(仅在AMD风格下有效) [default: ""]
-k, --known 已知的辅助函数
-o, --knownOnly 只包含已知的辅助函数
-m, --min 输出时进行压缩
-n, --namespace 模板命名空间 [default: "Handlebars.templates"]
-s, --simple 只输出模板方法
-N, --name 传递的字符串模板的名称。可选的,如果运行在一个简单的模式。操作时需要在多个模板.
-i, --string 从传递的CLI参数生成模板。“-”被视为一个特殊值,并导致为模板值读取标准输入
-r, --root 模板根元素。将从模板名称中剥离的基值.
-p, --partial 编译一个模板片段
-d, --data 编译时包含的数据
-e, --extension 模板表达式 [default: "handlebars"]
-b, --bom 从模板中移除BOM
-v, --version 打印当前编译器版本
--help 输出本条消息
如果使用预编译器的常规模式,则使用扩展名的相对模板名称将结果模板存储到Handlebars.templates
对象。 这些模板可以与模板相同的方式执行。 如果使用简单模式,则预编译器将生成一个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({
/** insert compiled output here **/
{"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
中动态引用这些模板
var result = Handlebars.partials["test1"]({ name: "yourname" });
//do whatever you want with the result