介绍
在前端开发中，我们经常需要自动生成部分代码，例如路由、页面等，以提高代码的可维护性和开发效率。这时，我们就需要使用生成器（generator）。而 broccoli-auto-generated 就是一个基于 broccoli 的生成器，帮助我们快速生成常见的前端代码。
安装
要使用 broccoli-auto-generated，我们需要安装以下依赖：
- Node.js (>= 6.x)
- NPM (>= 3.x)
- Broccoli (
npm install -g broccoli-cli)
安装完成后，可以通过以下命令安装 broccoli-auto-generated：
npm install --save-dev broccoli-auto-generated
使用
创建一个生成器
首先，我们需要创建一个生成器，来告诉 broccoli-auto-generated 我们需要生成哪些代码。创建一个 generator.js 文件，输入以下内容：
module.exports = function(autoGenerated) {
// 自定义生成器
};其中，autoGenerated 对象是 broccoli-auto-generated 提供的生成器 API，我们可以通过这个对象来创建文件、目录等。
创建一个 Brocfile
接下来，我们需要创建一个 Brocfile，来告诉 broccoli 我们要使用哪个生成器。创建一个 Brocfile.js 文件，输入以下内容：
const AutoGenerated = require('broccoli-auto-generated');
const generator = require('./generator');
module.exports = new AutoGenerated('src', {
generator
});其中，src 是我们的源文件目录，generator 是我们上一步创建的生成器。
执行生成器
在命令行中执行以下命令，就会执行生成器：
broccoli build dist
这会生成一个 dist 目录，其中包含我们通过生成器创建的文件和目录。
示例
下面，我们来演示如何使用 broccoli-auto-generated 自动生成路由和页面。
首先，我们需要安装以下依赖：
npm install --save-dev handlebars handlebars-layouts lodash
然后，我们创建一个 routers 目录，在其中创建一个 index.js 文件，用来定义路由：
module.exports = {
'/': {
page: 'index'
},
'/about': {
page: 'about'
}
};这里我们只定义了两个路由，分别对应首页和关于我们页面。
接下来，我们创建一个 views 目录，在其中创建一个 layouts 目录和一个 partials 目录，分别用来存放模板和局部模板。
在 layouts 目录中创建一个 main.hbs 文件，作为页面的主模板：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
------------------------
-------
------
-----------
-------
-------在 partials 目录中创建一个 header.hbs 文件和一个 footer.hbs 文件，分别用来存放页面头部和尾部的内容：
-- -------------------- ---- -------
---- ---------- ---
--------
------------------
-----
----
------ --------------------
------ ---------------------------
-----
------
---------
---- ---------- ---
--------
---- - ----
---------最后，我们修改 generator.js，增加自定义生成器：
-- -------------------- ---- -------
----- ---------- - ----------------------
----- ------ - ------------------------------
----- - - ------------------
----- -- - --------------
----- ---- - ----------------
-- -- ---------- - ------- --
----------------------------------------------
-------------- - ----------------------- -
-- ------
----- ------- - ---------------------------
-- -------------- ---------- --
------------------ ------- ----- -- -
----- -------- - ------------------------------------
----- ------------ - -----------------------------
-- ----------
----- -------- - ------------------------------------------------ ---------
----- -------- - -
------- ------------------------------------------------ --------
------- ------------------------------------------------ -------
--
-- ----
----- ---- - ------------------------ --------------- --------- ------- ----------- -- ------
-- ----
------------------------- ------
---
-这个生成器的流程是：
- 读取
routers/index.js文件； - 遍历路由，为每个页面创建一个 handlebars 模板；
- 渲染模板，并生成文件。
执行 broccoli build dist 命令，就会生成一个 dist 目录，其中包含我们通过生成器创建的文件和目录。
在这个示例中，我们利用 broccoli-auto-generated、handlebars 和 lodash，实现了一个自动生成页面的工具，这大大提高了我们的开发效率。
总结
broccoli-auto-generated 是一个很强大的生成器工具，可以帮助我们快速生成前端代码。通过本文的学习，相信读者对它的使用已经有了一定的了解，可以在实际开发中灵活运用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066c8accdc64669dde526c