随着 ES6/ES2015 标准的发布和广泛应用，Generator 函数作为其新增的语言特性之一也受到了很多的关注和使用。Generator 函数可以帮助我们更灵活的控制代码的执行流程，但是在使用时需要注意一些细节。
本文主要介绍在使用 Babel 编译 Generator 函数时可能会遇到的问题及其解决方法。
问题
当我们使用 Babel 将 ES6/ES2015 代码转换为 ES5 代码的时候，如果 Generator 函数的使用不当，就会导致编译后的代码无法运行，甚至会抛出错误。下面是一个使用 Generator 函数的示例代码：
-- -------------------- ---- ------- --------- ----- - ----- -- ----- -- ------ -- - --- - - ------ ---------------------- -- ------- -- ----- ------ ---------------------- -- ------- -- ----- ------ ---------------------- -- ------- -- ----- ----- ---------------------- -- ------- ---------- ----- -----
上述代码中，我们通过 function* 声明了一个 Generator 函数 foo，通过 yield 关键字控制了函数的执行流程，最终通过 return 返回了一个值。在函数调用时，通过 foo() 返回一个迭代器对象，然后使用 next() 方法依次取出迭代器中的值。
如果直接将上述代码用 Babel 编译为 ES5 代码执行，可能会得到以下的错误提示：
Uncaught TypeError: f is not a function
原因
Babel 在将 Generator 函数编译为 ES5 代码时，会将其转换为一个包含 next、throw 和 return 等方法的对象，而不是一个普通的函数。因此，当我们使用 foo() 调用 Generator 函数时，得到的并不是一个像普通函数一样的值，而是一个迭代器对象，需要通过 next() 方法依次取出其值。
例如，在上述示例代码中，我们使用了 let f = foo() 将 Generator 函数的返回值赋值给了 f 变量，而不是将 foo 函数本身赋值给 f。如果我们使用以下的代码赋值，就不会出现错误：
let f = foo;
但是，这仅仅是解决了上述错误的一部分，我们还需要解决编译后代码中存在的其他问题。
在上述示例代码中，我们使用了 return 关键字返回了一个值，但是在编译后的代码中，这个值并不会被返回。因为在迭代器对象中，return 方法只是标记了当前的迭代器对象为“已完成”，并不是真正的返回值。
解决方法
解决上述问题的方法就是使用 Babel 的插件或者手动修改编译后的代码。下面分别介绍这两种解决方法。
使用 Babel 插件
Babel 已经提供了一些插件来处理 Generator 函数的编译，比如 babel-plugin-transform-regenerator 和 babel-plugin-transform-runtime 等插件。这些插件可以将编译后的 Generator 函数代码与运行环境中的 regeneratorRuntime 或者 babel-runtime 模块配合使用，以支持 Generator 函数的正确运行。
以 babel-plugin-transform-regenerator 插件为例，我们需要先安装插件依赖：
npm install --save-dev babel-plugin-transform-regenerator
然后在 .babelrc 配置文件中加入插件：
{
"plugins": ["transform-regenerator"]
}这样，在使用 Babel 编译 Generator 函数时，就可以正确地转换为 ES5 代码，同时支持 yield 和 return 等关键字的使用。例如，上述的示例代码使用 Babel 编译后的代码如下：
-- -------------------- ---- ------- ---- -------- --- ------------------- - ------------------------------- --------- ----- - ----- -- ----- -- ------ -- - --- - - ------ ---------------------- -- ------- -- ----- ------ ---------------------- -- ------- -- ----- ------ ---------------------- -- ------- -- ----- ----- ---------------------- -- ------- ---------- ----- -----
通过 require("regenerator-runtime") 引入 regeneratorRuntime 模块，并且使用 regeneratorRuntime.wrap 方法将编译后的 Generator 函数包装成一个正常的函数，从而支持正确的调用方式。
手动修改编译后的代码
如果不想使用插件，也可以手动修改编译后的代码。下面是一个手动修改的示例代码：
-- -------------------- ---- -------
---- --------
-------- ----- -
--- ------- - -------------------------------------------
-------- ------ -
------ -------------------------------- --------------- -
----- --- -
------ -------------- - -------------- -
---- --
------------- - --
------ --
---- --
------------- - --
------ --
---- --
------ ------------------------- ---
---- --
---- ------
------ ----------------
-
-
-- ---------
-
------ -------
-
--- - - ------
---------------------- -- ------- -- ----- ------
---------------------- -- ------- -- ----- ------
---------------------- -- ------- -- ----- -----
---------------------- -- ------- ---------- ----- -----我们将编译后的 Generator 函数转换为一个普通的函数，同时将 yield 和 return 关键字使用 regeneratorRuntime.wrap 方法包装成正常的代码。使用手动修改的方式需要对编译后的代码进行一定的了解和技术储备。
结论
使用 Generator 函数可以帮助我们更灵活地控制代码的执行流程，但是在使用时需要注意 Babel 在编译 Generator 函数时可能存在的问题，以及使用相应的解决方法。一般通过使用 Babel 插件来解决问题是较为简便和安全的方式，手动修改编译后的代码需要一定的技术储备，但有利于更深入的了解 Generator 函数的原理和运行机制。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6700ec6a0bef792019ae13f9