随着前端的发展，开发者们经常需要使用一些工具库和框架来快速开发项目。其中，npm 包是前端开发中常用的依赖管理工具，提供了非常丰富的第三方库。在本篇文章中，我们将介绍一个非常实用的 npm 包：broadway-handlebars。
什么是 broadway-handlebars？
Broadway-handlebars 是 Handlebars 模板引擎的一个封装，它使得在 Express.js 框架中使用 Handlebars 模板更加容易。使用 Broadway-handlebars，你只需要在 Express.js 项目中安装这个包并简单配置即可。
安装 broadway-handlebars
使用 npm 指令进行安装，可以在项目文件夹下运行以下命令：
npm install --save broadway-handlebars
使用 broadway-handlebars
在 Express.js 项目中，你需要先加载 broadway-handlebars 库，然后创建 view engine 实例。在 app.js 文件中添加以下代码：
-- -------------------- ---- -------
----- ------- - -------------------
----- ------ - -------------------------------
----- --- - ----------
-- -- ---- ------
----- ---------- - ---------------
-------------- -------
----------- --------- - ------------------
------------ --------- - ------------------
---
------------------------ -------------------
------------- -------- --------------在以上代码中，我们首先引入了 Express.js 和 broadway-handlebars 库。接下来，我们使用 exphbs.create() 方法创建一个 Handlebars 引擎实例，设置了默认布局（main.handlebars）的路径和局部视图的路径。最后，我们使用 app.engine() 方法注册 Handlebars 引擎，并将其设置为默认视图引擎。
创建视图
在 Express.js 中使用 Handlebars，你需要创建一个 view 文件作为模板。创建一个 views 文件夹，并在其中创建一个名为 index.handlebars 的文件：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
------------------------
-------
------
----------
------------------
--- --------
-----------------
------------------
-------
-------在以上代码中，我们简单的定义了一个基本的 HTML 页面，使用了 Handlebars 模板语法设置了 title 和 body 的值。我们还使用了 {{> footer}} 语法引用了另外一个 partial 文件（footer.handlebars），表示这个页面需要使用公共 footer 部分。
局部视图
现在我们需要创建 footer 页面。在 views/partials/ 文件夹下创建一个名为 footer.handlebars 的文件：
<footer>This is a footer</footer>
以上代码非常简单，仅包含了一个 footer 元素。
Helpers
你还可以使用 Handlebars helpers 来处理视图中的数据。让我们创建一个名为 getCurrentYear 的辅助函数，它将返回当前年份：
// 注册 helpers
handlebars.handlebars.registerHelper('getCurrentYear', function() {
return new Date().getFullYear();
});在以上代码中，我们在 handlebars 上注册了一个 helper 函数 getCurrentYear，用于在 template 中获取当前的年份。
在 Express.js 项目中使用
现在你需要在路由中设置 index 视图的值。在 routes/ 文件夹下创建一个名为 index.js 的文件：
-- -------------------- ---- -------
----- ------- - -------------------
----- ------ - -----------------
--------------- -------- ----- ---- -
------------------- -
------ ----------- ---- ---------------------
----- ------ -------
---
---
-------------- - -------在以上代码中，我们定义了一个路由 '/'，在该路由中调用 res.render() 方法渲染 index.handlebars 视图，并将标题和正文传递到视图中。
最后，在 app.js 文件中加载该路由：
const indexRouter = require('./routes/index');
app.use('/', indexRouter);总结
本文介绍了如何使用 broadway-handlebars 实现在 Express.js 中快速开发 web 应用程序。简要介绍了 broadway-handlebars 的功能和用法，并提供了适用于实际项目的代码示例。如此快速的入门和上手，broadway-handlebars 应该会成为你实际开发项目必不可少的利器。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066c8accdc64669dde5215