Yeoman-Handlebars-Engine 是一个用于构建应用程序的工具，它使用 Handlebars 模板引擎并且支持广泛的前端框架。在这篇文章中，我们将向您介绍如何使用 Yeoman-Handlebars-Engine。
安装
首先，在您的项目中安装 Yeoman-Handlebars-Engine：
npm install --save yeoman-handlebars-engine
然后，将 Handlebars 和相关的扩展、插件、helpers 添加到您的项目中:
npm install --save handlebars handlebars-helpers handlebars-layouts
初始化项目
接下来，我们将创建一个新的项目，并将 Yeoman-Handlebars-Engine 添加到其中。我们将使用 Yeoman 创建一个模板项目:
yo hbs-template
在这个过程中，您将会被提示输入项目名称和应用程序的基础结构。例如，您可以选择使用哪个样式框架、哪个 JavaScript 库等等。
接下来，Yeoman 将生成您的项目，并创建基本的文件结构。您现在已经可以开始编写代码了。
编写模板
创建一个新的 Handlebars 模板文件，并使用标准的 Handlebars 语法编写您的模板:
-- -------------------- ---- ------- --------- ----- ------ ------ ------ ---------------- ------------------------- ------- ------ --------- -------------------- ---------- ---- ------ --------- ----------- -------- -------------- ---------- ------- -------
在这个例子中，我们定义了一个基本的 HTML 模板，将标题 {{title}} 和版权信息 {{author}} 和 {{year}} 注入到模板中。
创建数据
现在，我们将创建一些应该在模板中使用的数据。我们不会直接在模板中添加数据，而是将它们保存在一个 JSON 文件中，然后在运行时加载它们。
在您的项目根目录下，创建一个名为 data.json 的文件，并在其中添加以下代码：
{
"title": "Hello World",
"author": "John Doe",
"year": "2021"
}之后，将我们的数据注入到模板中：
const Handlebars = require('handlebars');
const data = require('./data.json');
const source = fs.readFileSync('./template.hbs', 'utf8');
const template = Handlebars.compile(source);
const result = template({title: data.title, author: data.author, year: data.year});
console.log(result);运行
最后，我们需要在命令行中运行我们的应用程序:
node app.js
在您运行这个应用程序后，你将会在命令行输出你的 HTML 模板的结果。
总结
在这篇文章中，我们学习了如何使用 Yeoman-Handlebars-Engine 构建应用程序。通过学习这个工具的基础知识，我们可以更加高效地构建应用程序。同时，我们也学习了如何使用 Handlebars 模板引擎以及如何呈现您的数据。我希望这篇文章能够帮助您更好地掌握这个工具，让您能够更好地构建应用程序。如果你有任何问题或疑问，欢迎在评论中与我们分享。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/72934