当前位置: 首页 > 工具软件 > Handlebars > 使用案例 >

Handlebars 安装

濮阳景天
2023-12-01

有多种方法可以安装Handlebars, 这取决于你使用的编程语言和环境变量。

npm 或者 yarn(推荐)


Handlebars 的参考实现使用javascript写的,它最常用的安装方式是使用npmyarn

$ npm install handlebars
# or
$ yarn add handlebars

然后你可以在程序里使用 require 来使用Handlebars:

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

提示:

npm 或者 yarn 是使用 Handlebers 的推荐方式。但是如果你想在浏览器中使用它,我们推荐你使用构建工具,例如webpack, browserify, 或者 parcel等。

integrations 页面中包含一个可用的 loaders 插件列表,你可以使用他们去自动预编译模板或者使用Handlebars的其它方面。

在npm包中的浏览器构建

浏览器构建在node_modules/handlebars/dist目录中。让浏览器能够访问这些文件将取决于您使用的构建系统,但这可能与将文件复制到一个可访问的位置一样简单。

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

下载Handllebars


为了方便社区,提供了以下下载。它们并不用于生产,但是它们可以让您快速启动,而不需要设置构建引擎。

最新版本(version 4.5.1)

Handlebars4.5.1(编译器+运行时) 压缩版

Handlebars4.5.1(仅运行时) 压缩版

非发行版

Handlebars的所有最新版本和CI 构建版本都可以在S3服务的构建页面中下载。

最新通过的主版本名为handlebars-latest.js.每个在主版本上通过的SHA都会创建一个handlebars-gitSHA.js文件.当所有这些都通过CI持续集成后,将得到目标程序。

CDNs


Handlebars 可以在一些免费CDN上获得,比如:

RubyGems


官方的Handlebars 构建版本在这里

Bower, Component, Composer, jspm


Handlebars 也可以通过其它包管理工具使用:

  • Bower
  • Component
  • Composer
  • jspm

使用方法


你可以将handlebars模板写在一个<script>标签内,然后通过ID交付给浏览器。

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

我们可以像下面这样编译它:

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

使用上下文对象和模板得到最终的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的编译器和运行时版本。预先编译模板并在网站中包含预编译的版本会更有效。您可以包含较小的运行时,并且浏览器不必在运行模板之前编译它们。

请查阅《Handlebars-预编译模板》一章

 类似资料: