介绍
broccoli-regenerator 是一个用于转换 async/await 和 Generator 函数语法的 npm 包。它使用 regenerator 库进行转换。Broccoli-regenerator 具有快速，可靠和灵活的构建特性，因此它非常适合在 Broccoli 构建系统中使用。使用它可以让我们在项目中更方便地使用 ES2015 和 ES2017 中的新特性，不必考虑前端浏览器的支持问题，增加代码的可读性和可维护性。这里我们将详细阐述如何使用 broccoli-regenerator 进行相关操作。
安装和基本用法
Broccoli-regenerator 可以通过 npm 来安装。
npm install broccoli-regenerator --save-dev
安装完成后，我们可以使用 broccoli 来进行构建。
const regenerator = require('broccoli-regenerator');
const outputDir = regenerator(inputDir[, options]);其中， inputDir 是输入目标文件夹， outputDir 是输出目标文件夹。如果需要对多个文件夹进行构建，可以对 inputDir 进行数组化。
const inputDirs = [dir1, dir2]; const outputDirs = inputDirs.map(inputDir => regenerator(inputDir));
此时，就可以在构建之前对 options 进行设置。常用选项如下所示：
async: 是否对 async/await 语法进行转换。generators: 是否对 Generator 函数语法进行转换。sourceMaps: 是否生成源地图。
示例
我们举一个例子来演示在实际项目中如何使用 broccoli-regenerator。
例子背景
该项目使用了 Grunt 作为构建工具，通过 SASS 处理 CSS，无法直接使用ES2015新特性。我们将利用 broccoli-regenerator 编译我们的 ES2015 代码，使其可以直接与 Grunt 兼容。
代码实现
首先，我们需要编写 Gruntfile.js 配置文件。
-- -------------------- ---- -------
-------------- - --------------- -
------------------
------ -
----- --------
--
----- -
-------- -
------------ ------------
--
----- -
------ --
------- -----
---- -----------
---- --------------
----- -----------
---- ------
--
-
--
------------ -
----- -
-------- -
------ -----
----------- -----
----------- ----
--
---- ---------
----- ---------
-
--
------ -
---- -
------ -----------------------
------ --------
--
--- -
------ -------------------
------ ---------------
-
-
---
------------------------------------------
-----------------------------------------
------------------------------------------
----------------------------- --------- ------- ----------------
--在配置文件中，我们首先清空 dist 目录，然后使用 Sass 编译 SCSS 文件，并输出到 dist/css 目录下。接着，我们使用 broccoli-regenerator 编译 ES2015 代码，并输出到 dist/js 目录下。最后，我们配置 watch 任务，监听 src 目录下的所有 SCSS 和 JS 文件的修改，并在修改后自动重新编译。
然后，我们需要安装 grunt-contrib-watch 和 grunt-contrib-sass，通过 npm install grunt-contrib-watch grunt-contrib-sass --save-dev 执行安装。
最后，我们在 src/js 目录下编写 ES2015 代码，并在 Gruntfile.js 中配置 broccoli-regenerator 任务，就可以自动编译生成经过编译的代码。
总结
通过这篇文章，我们了解了如何使用 npm 包 broccoli-regenerator 对 async/await 和 Generator 函数语法进行转换，为 ES2015 和 ES2017 新特性的使用提供了方便。同时，我们也学习了如何利用 broccoli 构建系统进行自动化构建。相信本文对于前端开发人员有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066c88ccdc64669dde50be