在前端开发中，使用模板引擎来渲染页面是一个很常见的需求。Handlebars.js 是一个流行的 JavaScript 模板引擎，它允许开发者使用简单易懂的语法来创建复杂的视图。
在这篇文章中，我们将介绍如何使用一个名为 parcel-plugin-handlebars 的 npm 包来把 Handlebars.js 集成到我们的项目中。这个包可以帮助我们自动编译 Handlebars 模板并且在构建时捆绑到我们的应用程序中。
安装
我们首先需要安装 parcel-bundler，它是一个快速、零配置的 Web 应用程序打包工具。同样的，我们也需要安装 parcel-plugin-handlebars，它是一个官方提供的 parcel 插件，可以帮助我们编译 Handlebars 模板。
npm install parcel-bundler parcel-plugin-handlebars --save-dev
配置
在你的项目中创建一个名为 .babelrc 的文件，添加以下内容：
{
"presets": [
"@babel/preset-env"
]
}然后，在项目的根目录中创建一个名为 .parcelrc 的文件，并添加以下内容：
{
"extends": "@parcel/config-default",
"plugins": {
"parcel-plugin-handlebars": {}
}
}这个文件告诉 parcel，我们要使用此插件来编译 Handlebars 模板。现在，我们准备好了开始编写 Handlebars 模板。
编写 Handlebars 模板
我们可以在任何地方编写 Handlebars 模板，甚至可以在 HTML 文件中。在这个例子中，我们创建了一个名为 template.hbs 的文件，内容如下：
<div class="user">
<h2>{{ name }}</h2>
<p>Age: {{ age }}</p>
{{#if isAdmin}}
<p>Admin</p>
{{/if}}
</div>这是一个简单的模板，它包含了一些变量和条件语句。
使用 Handlebars 模板
现在，我们准备在我们的 Web 应用程序中使用这个模板。我们可以在 JavaScript 文件中导入它，并使用 Handlebars 编译它。
-- -------------------- ---- ------- ------ ---------- ---- ------------- ------ -------- ---- ----------------- ----- ---- - - ----- ----- ----- ---- --- -------- ----- -- ----- ---- - ----------------------------------- ----------------------- - -----
我们首先从 handlebars 包中导入 Handlebars 对象，并从我们的模板文件中导入模板。然后，我们定义一个数据对象，它包含了模板中使用的变量。最后，我们编译模板并将编译结果插入到页面中。
在使用 npm 包 parcel-plugin-handlebars 之后，我们不需要手动编译模板文件。它将自动在构建时被编译，并且在打包后的文件中被捆绑。
示例代码
你可以在 GitHub 上找到一个完整的示例代码，演示了如何使用 npm 包 parcel-plugin-handlebars。 https://github.com/parcel-bundler/parcel/tree/master/examples/handlebars
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60057bff81e8991b448ebaf2