前端开发非常依赖于一些工具和库。本篇文章将重点介绍 Broccoli-hbs 包，这是一个基于NodeJS的用于构建Web应用程序的工具。我们将深入了解npm包的使用、它带来的好处，并分享如何使用该工具构建你自己的Web应用程序。
什么是 Broccoli-hbs 包
在介绍如何使用 Broccoli-hbs 包之前，我们先来谈谈它是什么。简而言之，Broccoli-hbs 包可以让你在构建Web应用程序的过程中，使用Handlebars模板系统。Handlebars是一种JavaScript模板引擎，用于在应用程序中动态生成HTML代码。它支持基本语法和通用模板构造，可以帮助你快速开发网站的前端部分。
作为一个Broccoli插件，Broccoli-hbs可以允许你预先编译Handlebars模板文件，并将生成的HTML文本输出到静态文件中。这个吉祥物和名称是来自Vegetable： Broccoli. 这个包支持许多类型的文件的自动处理，比如coffeescript文件自动加入一个编译器等等。
何为 broccoli ？
Broccoli是JavaScript的一个资源pipeline，你可以把它看成著名的Grunt / Gulp之类的构建流程工具的下一代版本，可以用它搭建自己的web应用的工具流。它支持并行执行、高效缓存和紧凑的包大小等特性，可以让你构建快速、健壮和可重复使用的Web应用程序。
使用Broccoli库中的函数和代码可以从磁盘加载输入，处理它们并输出到另一个目录，这通常是Web应用程序所需要的目录。您还可以使用Broccoli集成其他东西，如concurrently和nodemon，以便更快地开发Web应用程序。
安装和配置 Broccoli-hbs 包
在使用 Broccoli-hbs 包之前，你需要先安装它。你可以使用npm在你的项目中安装 Broccoli-hbs 包：
npm install --save-dev broccoli-hbs
安装完成后，就可以开始为你的应用程序配置构建操作了。下面是配置文件示例：
-- -------------------- ---- -------
--- ---------- - -------------------------------
--- ----------- - ------------------------
--- -- - --- ---------------------------- -
----------- --------
--------- ---------------
---------------- -----
--------------- -
------------- -
----- -----
--------- ----
-
-
---
-------------- - -----------------在上述的例子中，我们构造了一个Broccoli树，使用了两个在npm上找到的包：broccoli-merge-trees和broccoli-hbs。该树包含在app/templates和app/partials目录中的Handlebars模板，它们将被编译成带有.html扩展名的设备的HTML文件。
你还可以使用Broccoli-hbs来生成其他类型的文本文件，例如JS/CSS文件，这里Codepen的例子演示了如何为Web应用程序生成CSS文件：
-- -------------------- ---- -------
--- ---------- - --------------------------------
--- ------ - ---------------------------
--- ---- - -------------------------
--- ------ - ---------------------------
--- ------------ - ---------------------------------
--- ------ - --- ------------------ -
------- ----
-------- --------------
----------- -----
---
--- ---- - --- -------------- ------------- -------------
--- ------------- - ------------------ - --------- ---- -- --- ----- - ---------- ---
-- ----
--- ----------- - ----------------------
-------------- - --------------------------使用 Broccoli-hbs 包
现在你已经安装和配置了 Broccoli-hbs 包，我们来看看如何在实际项目中使用它。下面是一个使用 Broccoli-hbs 包的应用示例：
-- -------------------- ---- -------
----
- ----------
- ---------
- ---------
- ------
-----
- ----------
- ---------
- ------在此行动中，我们将使用Broccoli-hbs编译/app/templates/index.hbs文件，并将其放置在/dist/index.html文件中。我们还将使用Broccoli传输器复制/app/style.css和/app/app.js文件并放置在/dist/style.css和/dist/app.js中。
来看看我们的Brocfile.js文件：
-- -------------------- ---- -------
--- ----------- - -------------------------------------
--- ---------- - --------------------------------
--- ------ - ---------------------------
--- ----------- - ------------------------
-- ------ -- --- ----- ---- ------ -- --- ------
--- ------- - ------------- -
------- ----
-------- -------------------------
----------- -----
------------------- ---------------------- -
-- ------------------------------ -
------ ------------------------------ --------
- ---- -
------ -------------
-
-
---
--- --- - ---------------------- -------------- ------------- -
---------- -----
--------------- ----
---
-- --- ---- -- - ---- -- --- ----------- ----
--- ------- - ---------------------------- ------
-- ----- --- ---------
--- ------------ - --- ---------------------------- -
---------------- ------
---
-- ---- ---------- -- ---- ---------
--- --------- - --------------- -
------- ----
-------- ----
-------- -----------------
---
-- ----- -----
--- ----------- - ------------------------- ---------- ----------
-------------- - ------------在此代码中，我们首先使用funnel函数从/app文件夹中获取.css和.scss文件，将它们编译成.css ("styles.css") 并将它们存储在/dist/styles.css文件中。
接下来，我们考虑app文件夹，将其与public文件夹(/)和上述处理的样式表一起合并，并将合并树传递到new HbsCompiler()函数中，以便编译来自app/templates文件夹的所有.hbs文件。你可能注意到，在此行动中您的所有模板将具有相同的typescript作为html输出,因为在HbsCompiler的配置选项中设置了outputExtension: 'html'。
最后，我们使用funnel函数将编译好的index.html从树中拿出来，并放到/dist文件夹中。
总结
在这篇文章中，我们看到了Broccoli-hbs包是如何帮助我们使用Handlebars模板系统，预先编译模板文件，并将生成的HTML文本输出到静态文件中的。虽然我们只介绍了包的最基础功能，但是它还有很多强大特性让我们使用，可以用于开发工具集、树合并（如Broccoli-merge-trees）等等。
如果你正在构建一个新的Web应用程序，那么我强烈建议你探索一下Broccoli-hbs包的巨大潜力，它可以将你的前端开发工作高效地完成。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066c87ccdc64669dde4fc3