npm 包 broccoli-regenerator 使用教程-JavaScript中文网-JavaScript教程资源分享门户

npm 包 broccoli-regenerator 使用教程

介绍

broccoli-regenerator 是一个用于转换 async/await 和 Generator 函数语法的 npm 包。它使用 regenerator 库进行转换。Broccoli-regenerator 具有快速，可靠和灵活的构建特性，因此它非常适合在 Broccoli 构建系统中使用。使用它可以让我们在项目中更方便地使用 ES2015 和 ES2017 中的新特性，不必考虑前端浏览器的支持问题，增加代码的可读性和可维护性。这里我们将详细阐述如何使用 broccoli-regenerator 进行相关操作。

安装和基本用法

Broccoli-regenerator 可以通过 npm 来安装。

--- ------- -------------------- ----------

安装完成后，我们可以使用 broccoli 来进行构建。

----- ----------- - --------------------------------

----- --------- - ---------------------- ----------

其中， inputDir 是输入目标文件夹， outputDir 是输出目标文件夹。如果需要对多个文件夹进行构建，可以对 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