# 安装

有多种安装 Handlebars 的方法，具体取决于所使用的编程语言和环境。

# npm 或 yarn（推荐）

Handlebars 的参考实现是用 JavaScript 编写的。它最常使用 npm 或 yarn 安装

npm install handlebars

或

yarn add handlebars

然后可以通过导入来使用 Handlebars

import Handlebars from "handlebars";
const template = Handlebars.compile("Name: {{name}}");
console.log(template({ name: "Nils" }));

如果在 CommonJS 环境中使用 Handlebars，可以使用 require

const Handlebars = require("handlebars");
const template = Handlebars.compile("Name: {{name}}");
console.log(template({ name: "Nils" }));

提示

使用 npm 或 yarn 是使用 Handlebars 的推荐方法。如果要在 Web 浏览器中使用 Handlebars 模板，我们建议使用 Webpack、Browserify 或 Parcel 等构建引擎。

集成页面包含这些加载器的插件列表，允许自动预编译模板或以其他方式使用 Handlebars。

了解更多：集成

# npm 包中的浏览器构建

浏览器构建位于 node_modules/handlebars/dist/ 目录中。使浏览器可以访问这些构建取决于所使用的构建系统，但这可能就像将文件复制到可访问的位置一样简单。

这是使用预编译器时的首选安装方法，因为它确保预编译模板始终针对相同版本的运行时运行。

# 下载 Handlebars

以下下载作为一种便利提供给社区。它们不适用于生产用途，但可以在不必设置构建引擎的情况下快速入门。

# 最新版本（版本 4.7.8）

Handlebars 4.7.8（编译器 + 运行时）已压缩

如果你想在浏览器中编译你的模板，请使用此版本作为快速启动。

Handlebars 4.7.8（仅运行时）经过精简的

当你使用浏览器中的预编译模板时，请使用此版本。此版本不包含编译器。

# 非发布版本

所有 Handlebars 的发布版本和 CI 版本都可以在我们的构建页面 (在新窗口中打开)上下载，供 S3 使用。

最新的通过主版本构建被命名为 handlebars-latest.js，并且每个通过主版本上的 SHA 将创建一个 handlebars-gitSHA.js 文件。虽然这些都通过了 CI，但最好使用其中一个标记的版本。

注意：构建页面作为一种便利为社区提供，但你不应在生产中使用它来托管 Handlebars。

# CDN

Handlebars 也托管在许多免费 CDN 上。

cdnjs (在新窗口中打开)。高级用法，例如版本别名和混合 (在新窗口中打开)，是可用的。

# RubyGems

官方 Handlebars 构建可在 https://rubygems.org.cn/gems/handlebars-source (在新窗口中打开) 上获得。

# Bower、Component、Composer、jspm

Handlebars 还可以使用其他包管理器启用，例如

Bower（已弃用）
Component
Composer
jspm

有关详细信息，请参阅 https://github.com/components/handlebars.js (在新窗口中打开)。

# 用法

您可以通过将其包含在 <script> 标记中来向浏览器传递模板。

<script id="entry-template" type="text/x-handlebars-template">
  <div class="entry">
    <h1>{{title}}</h1>
    <div class="body">
      {{body}}
    </div>
  </div>
</script>

始终为您的模板使用脚本标记

如果您使用此方法，则必须用脚本标记包装您的模板。否则，如果您不这样做，浏览器可能会删除或修改模板的某些部分。请参阅 "表格中的意外标记" (在新窗口中打开) 以获取示例。

使用 Handlebars.compile 在 JavaScript 中编译模板

var source = document.getElementById("entry-template").innerHTML;
var template = Handlebars.compile(source);

通过使用上下文执行模板来获取评估 Handlebars 模板的 HTML 结果。

var context = { title: "My New Post", body: "This is my first post!" };
var html = template(context);

结果为

<div class="entry">
  <h1>My New Post</h1>
  <div class="body">
    This is my first post!
  </div>
</div>

# 预编译模板

在前面的示例中，我们加载了 Handlebars 的编译器和运行时版本。预先编译模板并将其预编译版本包含在您的网站中效率更高。您可以包含较小的运行时，并且浏览器不必在运行模板之前编译它们。

了解更多信息：预编译

# Bower（已弃用）

警告

Bower 已弃用 (在新窗口中打开)

Bower 版本的 Handlebars 仍（目前）发布以实现向后兼容性。但是，如果您正在设置一个新项目，则不应再使用它。

# 其他编程语言

许多编程语言都有 Handlebars 实现。

预编译模板 →