# 预编译模板

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

# 入门

首先，你需要 Node.js 和 npm 。转到 https://nodejs.org/en/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>

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

# 优化

因为你在预编译模板，所以你还可以对编译器进行多种优化。首先你可以指定一个已知 helper 的列表：

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

Handlebars 编译器将优化对这些 helper 的访问以提高性能。当所有 helper 都在编译时时候，--knownOnly 选项提供了最小的生成代码，也提供了最快的执行速度。

# 用法

Precompile handlebar templates.
Usage: handlebars [template|directory]...
Options:
  -f, --output         Output File                                                                              [string]
  --map                Source Map File                                                                          [string]
  -a, --amd            Exports amd style (require.js)                                                          [boolean]
  -c, --commonjs       Exports CommonJS style, path to Handlebars module                        [string] [default: null]
  -h, --handlebarPath  Path to handlebar.js (only valid for amd-style)                            [string] [default: ""]
  -k, --known          Known helpers                                                                            [string]
  -o, --knownOnly      Known helpers only                                                                      [boolean]
  -m, --min            Minimize output                                                                         [boolean]
  -n, --namespace      Template namespace                                     [string] [default: "Handlebars.templates"]
  -s, --simple         Output template function only.                                                          [boolean]
  -N, --name           Name of passed string templates. Optional if running in a simple mode. Required when operating on
                       multiple templates.                                                                      [string]
  -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.    [string]
  -r, --root           Template root. Base value that will be stripped from template names.                     [string]
  -p, --partial        Compiling a partial template                                                            [boolean]
  -d, --data           Include data when compiling                                                             [boolean]
  -e, --extension      Template extension.                                              [string] [default: "handlebars"]
  -b, --bom            Removes the BOM (Byte Order Mark) from the beginning of the templates.                  [boolean]
  -v, --version        Prints the current compiler version                                                     [boolean]
  --help               Outputs this message                                                                    [boolean]

如果使用预编译器的 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 ...）。参阅集成页面：

了解更多：集成

← 安装集成 →