Babel 如何转换 ES6 的 Generators？

在 ES6 中，Generator 函数是一种特殊的函数，它可以暂停执行，并在需要时恢复执行。这种函数在异步编程、迭代器和生成器等方面有很多应用。然而，由于不是所有浏览器都支持 ES6，因此我们需要使用 Babel 将 ES6 的 Generator 函数转换为 ES5 代码，以便在所有浏览器上运行。

Babel 转换 Generators 的原理

在 ES6 中，Generator 函数的语法是这样的：

function* myGenerator() {
  yield 1;
  yield 2;
  yield 3;
}

在 Babel 中，Generator 函数会被转换成一个普通的函数，该函数返回一个迭代器对象。迭代器对象可以使用 next() 方法获取下一个值，直到迭代器结束。转换后的代码如下：

// javascriptcn.com 代码示例
function myGenerator() {
  var _marked = /*#__PURE__*/regeneratorRuntime.mark(myGenerator);

  return {
    next: function next() {
      var value;
      // ...
      return { value: value, done: done };
    }
  };
}

其中，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 函数来生成斐波那契数列的示例代码：

// javascriptcn.com 代码示例
function* fibonacci() {
  let a = 0, b = 1;
  while (true) {
    let c = a + b;
    yield c;
    a = b;
    b = c;
  }
}

const fib = fibonacci();
console.log(fib.next().value); // 1
console.log(fib.next().value); // 2
console.log(fib.next().value); // 3
console.log(fib.next().value); // 5

使用 Babel 转换后的代码如下：

// javascriptcn.com 代码示例
function fibonacci() {
  var a, b, c;
  return regeneratorRuntime.wrap(function fibonacci$(_context) {
    while (1) {
      switch (_context.prev = _context.next) {
        case 0:
          a = 0, b = 1;

        case 1:
          if (!true) {
            _context.next = 8;
            break;
          }

          c = a + b;
          _context.next = 5;
          return c;

        case 5:
          a = b;
          b = c;
          _context.next = 1;
          break;

        case 8:
        case "end":
          return _context.stop();
      }
    }
  }, _marked);
}

var fib = fibonacci();
console.log(fib.next().value); // 1
console.log(fib.next().value); // 2
console.log(fib.next().value); // 3
console.log(fib.next().value); // 5

总结

在本文中，我们介绍了 Babel 如何转换 ES6 的 Generator 函数，并提供了示例代码。通过使用 Babel 转换，我们可以使用 ES6 的 Generator 函数，而不必担心浏览器兼容性问题。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65728f32d2f5e1655db76502