# 安装

安装 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 的推荐方式。如果你想在网络浏览器中使用 Handlebars 模板，我们建议你使用构建引擎，例如 Webpack、Browserify 或 Parcel。

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

了解更多：集成

# 浏览器构建在 npm-package 中

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

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

# 下载 Handlebars

提供以下下载是为了方便社区。它们并不适合生产使用，但它们可以让你快速启动，而无需设置构建引擎。

# 最新版本（版本 4.7.8）

Handlebars 4.7.8 (compiler + runtime) minified

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

<下载 Handlebars：runtimeOnly="true">

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

# 非发布版本

Handlebars 的所有发布版本和 CI 版本都可以在我们的构建页面 (opens new window) 中的 S3 上下载。

最新传递的 master 版本名为 handlebars-latest.js，master 上的每个传递 SHA 将创建一个 handlebars-gitSHA.js 文件。虽然这些都通过了 CI，但最好使用标记的版本之一。

注意：提供构建页面是为了方便社区，但你不应该将其用于在生产中托管 Handlebars。

# CDN

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

cdnjs (opens new window)
jsDelivr (opens new window)。可以使用高级用法，例如版本别名和调制 (opens new window)。

# RubyGems

官方 Handlebars 版本已在 https://rubygems.org/gems/handlebars-source (opens new window) 上提供。

# Bower, Component, Composer, jspm

Handlebars 也可以通过使用其他包管理器来启用，例如

Bower（已弃用）
组件
作曲家
jspm

详情请参见 https://github.com/components/handlebars.js (opens new window)。

# 用法

你可以通过将模板包含在 <script> 标记中来将模板传送到浏览器。

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

始终为模板使用脚本标签

如果使用此方法，则必须使用脚本标签封装模板。否则，如果你不这样做，浏览器可能会删除或修改模板的部分内容。看一下 "表中出现意外标记" (opens new window) 的例子。

使用 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 已被弃用 (opens new window)

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

# 其他编程语言

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

预编译模板 →