# 预编译模板

使用 Handlebars 预编译器，你可以预编译 Handlebars 模板，以节省客户端时间并减少 Handlebars 库所需的运行时大小。

# 入门

首先，你需要有 Node.js 和 npm。请转至 https://nodejs.cn/download/ (opens new window) 了解如何在你的操作系统上执行此操作。

接下来，安装 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>

该运行时也可以在安装页面上下载。

# 优化

由于你正在预编译模板，因此你还可以对编译器应用多种优化。第一个允许你向编译器指定已知辅助程序的列表

handlebars <input> -f <output> -k each -k if -k unless

Handlebars 编译器将优化对这些助手的访问以提高性能。当所有辅助程序在编译时已知时，--knownOnly 选项提供最小的生成代码，同时也提供最快的执行。

# 用法

!把手 _ 帮助！

如果使用预编译器的正常模式，生成的模板将使用不带扩展名的相对模板名称存储到 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 **/
});

最后，你可以在 Javascript 中动态引用这些模板。

var result = Handlebars.partials["test1"]({ name: "yourname" });
// do whatever you want with the result

# 集成

一些 npm-packages 可用于将 Handlebars 预编译器集成到你的构建系统中（即 Webpack、Browserify...）。看一下集成页面：

了解更多：集成

← 安装集成 →