在前端开发中，使用模板引擎来渲染页面是一个很常见的需求。Handlebars.js 是一个流行的 JavaScript 模板引擎，它允许开发者使用简单易懂的语法来创建复杂的视图。
在这篇文章中，我们将介绍如何使用一个名为 parcel-plugin-handlebars 的 npm 包来把 Handlebars.js 集成到我们的项目中。这个包可以帮助我们自动编译 Handlebars 模板并且在构建时捆绑到我们的应用程序中。
安装
我们首先需要安装 parcel-bundler，它是一个快速、零配置的 Web 应用程序打包工具。同样的，我们也需要安装 parcel-plugin-handlebars，它是一个官方提供的 parcel 插件，可以帮助我们编译 Handlebars 模板。
--- ------- -------------- ------------------------ ----------
配置
在你的项目中创建一个名为 .babelrc 的文件，添加以下内容：
-
---------- -
-------------------
-
-然后，在项目的根目录中创建一个名为 .parcelrc 的文件，并添加以下内容：
-
---------- -------------------------
---------- -
--------------------------- --
-
-这个文件告诉 parcel，我们要使用此插件来编译 Handlebars 模板。现在，我们准备好了开始编写 Handlebars 模板。
编写 Handlebars 模板
我们可以在任何地方编写 Handlebars 模板，甚至可以在 HTML 文件中。在这个例子中，我们创建了一个名为 template.hbs 的文件，内容如下：
---- -------------
------ ---- -------
------- -- --- ------
----- ---------
------------
-------
------这是一个简单的模板，它包含了一些变量和条件语句。
使用 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