在 ES6 中，Generator 函数是一种特殊的函数，它可以暂停执行，并在需要时恢复执行。这种函数在异步编程、迭代器和生成器等方面有很多应用。然而，由于不是所有浏览器都支持 ES6，因此我们需要使用 Babel 将 ES6 的 Generator 函数转换为 ES5 代码，以便在所有浏览器上运行。
Babel 转换 Generators 的原理
在 ES6 中，Generator 函数的语法是这样的：
function* myGenerator() {
yield 1;
yield 2;
yield 3;
}在 Babel 中，Generator 函数会被转换成一个普通的函数，该函数返回一个迭代器对象。迭代器对象可以使用 next() 方法获取下一个值，直到迭代器结束。转换后的代码如下：
-- -------------------- ---- -------
-------- ------------- -
--- ------- - --------------------------------------------------
------ -
----- -------- ------ -
--- ------
-- ---
------ - ------ ------ ----- ---- --
-
--
-其中，regeneratorRuntime.mark 方法会将 Generator 函数转换为一个状态机，该状态机包含了所有 yield 语句的执行状态。
Babel 配置
要使用 Babel 转换 ES6 的 Generator 函数，我们需要安装 babel-plugin-transform-regenerator 插件。安装方法如下：
npm install --save-dev babel-plugin-transform-regenerator
然后，在 .babelrc 文件中配置插件：
{
"plugins": ["transform-regenerator"]
}示例代码
下面是一个使用 Generator 函数来生成斐波那契数列的示例代码：
-- -------------------- ---- -------
--------- ----------- -
--- - - -- - - --
----- ------ -
--- - - - - --
----- --
- - --
- - --
-
-
----- --- - ------------
------------------------------ -- -
------------------------------ -- -
------------------------------ -- -
------------------------------ -- -使用 Babel 转换后的代码如下：
-- -------------------- ---- -------
-------- ----------- -
--- -- -- --
------ -------------------------------- -------------------- -
----- --- -
------ -------------- - -------------- -
---- --
- - -- - - --
---- --
-- ------- -
------------- - --
------
-
- - - - --
------------- - --
------ --
---- --
- - --
- - --
------------- - --
------
---- --
---- ------
------ ----------------
-
-
-- ---------
-
--- --- - ------------
------------------------------ -- -
------------------------------ -- -
------------------------------ -- -
------------------------------ -- -总结
在本文中，我们介绍了 Babel 如何转换 ES6 的 Generator 函数，并提供了示例代码。通过使用 Babel 转换，我们可以使用 ES6 的 Generator 函数，而不必担心浏览器兼容性问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65728f32d2f5e1655db76502