ES6 系列之 Babel 将 Generator 编译成了什么样子？

当然，我很乐意基于给定主题撰写一篇文章。

ES6 系列之 Babel 将 Generator 编译成了什么样子？

ES6 Generator 是 ES6 中的语法， 用于生成迭代器（Iterator）。Babel 是一个 JavaScript 编译器， 可以将 ES6 代码转换为 ES5 代码， 以便能够在旧版本的浏览器中运行。

当 Babel 将 Generator 编译成 ES5 代码时， 会生成一个函数， 其中包含一个内部生成器函数。 内部生成器函数可以调用 next 方法来生成下一个值， 调用 return 方法来返回一个值并终止生成器函数， 或者调用 throw 方法来抛出一个异常。

Babel 将 Generator 编译成了什么样子？

我们来看一个简单的 Generator 函数：

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

这个 Generator 函数会生成一个值序列：1、2、3。

当 Babel 将这个 Generator 函数编译成 ES5 代码时， 会生成以下代码：

function generatorFunction() {
  var _context;
  _context = regeneratorRuntime.mark(function _callee() {
    return regeneratorRuntime.wrap(function _callee$(_context) {
      while (1) {
        switch (_context.prev = _context.next) {
          case 0:
            _context.next = 2;
            return 1;

          case 2:
            _context.next = 4;
            return 2;

          case 4:
            _context.next = 6;
            return 3;

          case 6:
        }
      }
    }, _callee, this);
  });
  return _context.apply(this, arguments);
}

这个 ES5 代码中，有一个内部生成器函数 _callee。 这个内部生成器函数与 Generator 函数具有相同的功能， 可以调用 next 方法来生成下一个值， 调用 return 方法来返回一个值并终止生成器函数， 或者调用 throw 方法来抛出一个异常。

如何使用 regenerator 工具来编译 ES6 Generator 函数？

regenerator 是一个 JavaScript 工具， 可以将 ES6 Generator 函数编译成 ES5 代码。

要使用 regenerator， 可以使用 npm 安装：

npm install regenerator

安装完成后， 可以使用 regenerator 命令来编译 ES6 Generator 函数。例如：

regenerator generator-es6.js > generator-es5.js

这个命令会将 generator-es6.js 文件中的 ES6 Generator 函数编译成 generator-es5.js 文件中的 ES5 代码。

总结

本文详细介绍了 Babel 是如何将 Generator 编译成 ES5 代码的，以及如何使用 regenerator 工具来编译 ES6 Generator 函数。希望本文能帮助大家更好地理解 Generator 语法，以及如何在旧版本的浏览器中使用 Generator 函数。