handlebars-预编译模板

使用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