前端开发中，我们经常会使用模板引擎来实现动态页面数据渲染。其中一个比较流行的模板引擎是 Handlebars，它支持多语言，易于学习和使用。而且，它还有一个令人称赞的优点，就是它允许您通过扩展来自定义您的语法。
但是，如果要使用 Handlebars，您需要安装许多依赖项和构建工具，例如 Gulp、Grunt 等等。这样可能会大大增加您的项目配置和复杂性。
为了更方便快捷地使用 Handlebars，我们可以使用 npm 包 broccoli-emblem-compiler。下面详细介绍该包的使用教程。
安装和配置
我们首先需要安装 broccoli-emblem-compiler 包。在您的项目根目录下通过 npm 安装：
npm install --save-dev broccoli-emblem-compiler
安装完成后，在您的项目中添加以下代码：
var compileEmblems = require('broccoli-emblem-compiler');
var trees = compileEmblems(inputTree, options);使用
在您的项目目录中，创建一个名为 templates 的文件夹，所有模板文件都将保存在该文件夹中。
在 templates 文件夹中创建一个名为 my-template.emblem 的文件。在该文件中，使用如下语法编写模板：
<!-- templates/my-template.emblem -->
<h1>{{title}}</h1>
{{#each items}}
<li>{{name}}</li>
{{/each}}请注意，我们使用 Handlebars 语法编写了模板，而不是 Ember.js 的模板语法。这就是 broccoli-emblem-compiler 与其他编译器不同之处。
编译和运行
最后，我们需要编译和运行我们刚刚创建的模板。在我们的项目目录中，创建一个名为 Brocfile.js 的文件，使用以下代码：
-- -------------------- ---- ------- --- -------------- - ------------------------------------ --- ------ - --------------------------- --- ---------- - -------------------------------- --- ------------- - ------------------- - -------- ---------------- -------- ----------- --- --- --------------- - ----------------------------- - ----------- --------------- -------- ----------------------- --------------- -------------------- -------------- --- -------------- - ---------------------------- -----------
此代码将编译所有包含 .emblem 后缀的文件，并将 HTML 输出到 templates.js 文件中。然后，我们将使用 AMD 规范将此文件包装为一个名为 templates.js 的模块。
要在浏览器中使用此模板，只需要在 HTML 文件中包含以下代码：
<script src="bower_components/handlebars/handlebars.js"></script> <script src="templates.js"></script>
示例代码
最后，我们提供一个完整的示例代码，帮助您更好地了解如何使用 npm 包 broccoli-emblem-compiler：
-- -------------------- ---- ------- --- -------------- - ------------------------------------ --- ------ - --------------------------- --- ---------- - -------------------------------- --- ------------- - ------------------- - -------- ---------------- -------- ----------- --- --- --------------- - ----------------------------- - ----------- --------------- -------- ----------------------- --------------- -------------------- -------------- --- -------------- - ---------------------------- -----------
<!-- templates/my-template.emblem -->
<h1>{{title}}</h1>
{{#each items}}
<li>{{name}}</li>
{{/each}}-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
--------------- ------ ----------------
-------
------
--- ----------------
------- ---------------------------------------------------------
------- ----------------------------
--------
--- ------ - -------------------------------------------------
--- -------- - ---------------------------
--- ---- - -
------ --- ------
------ -
- ----- ----- -- --
- ----- ----- -- --
- ----- ----- -- -
-
--
--- ---- - ---------------
------------------------------------------ - -----
---------
-------
-------希望这篇介绍 broccoli-emblem-compiler 的文章对您有帮助，使得您可以更轻松地使用 Handlebars 实现动态页面数据渲染。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066c8bccdc64669dde5324