Regenerator完整指南：如何将ES6 Generator函数快速转换为ES5兼容代码

2026-01-29 12:55:12作者：鲍丁臣Ursa

Regenerator是一款强大的源码转换工具，能够将ES6 Generator函数转换为可在当今JavaScript环境（ES5）中运行的代码。通过使用Regenerator，开发者可以提前使用ES6的生成器功能，而不必担心浏览器兼容性问题。

什么是Regenerator？

Regenerator的核心功能是将ECMAScript 6中的Generator函数和async函数转换为在ES5环境中可执行的代码。其官方描述明确指出，这是一个"能够在当今JavaScript（ES5）中启用ECMAScript 6生成器函数（yield）的源码转换器"。

为什么需要Regenerator？

尽管现代浏览器已经广泛支持ES6特性，但在一些旧环境或特定场景下，我们仍然需要将代码转换为ES5以确保兼容性。Regenerator解决了这一痛点，它专注于转换生成器函数，使其能够在不支持ES6生成器的环境中运行。

Regenerator转换流程示意图：箭头表示代码转换方向，三角形表示需要注意的兼容性问题

快速开始：安装与使用Regenerator

安装Regenerator

要开始使用Regenerator，首先需要通过npm安装。你可以通过以下命令将Regenerator添加到你的项目中：

npm install regenerator

如果你需要从源码构建，可以克隆仓库：

git clone https://gitcode.com/gh_mirrors/re/regenerator
cd regenerator
npm install

基本使用方法

Regenerator的使用非常简单，你可以通过命令行工具直接转换你的代码文件：

regenerator source.js > transformed.js

这将把包含Generator函数的source.js文件转换为兼容ES5的transformed.js文件。

Regenerator的核心组件

Regenerator项目由多个关键组件组成，它们协同工作以实现Generator函数的转换：

1. 转换核心：regenerator-transform

转换功能主要由packages/transform/目录下的代码实现。这个组件负责将Generator函数和async函数分解为状态机，使其能够在ES5环境中运行。

2. 运行时支持：regenerator-runtime

转换后的代码需要运行时支持，这部分功能由packages/runtime/提供。运行时提供了必要的工具函数，使转换后的代码能够正确执行。

3. Babel预设：regenerator-preset

为了方便与Babel集成，Regenerator提供了一个Babel预设packages/preset/，可以轻松地将Regenerator集成到Babel的转换流程中。

实际应用：将Generator函数转换为ES5

让我们来看一个简单的例子，了解Regenerator如何工作。假设我们有以下包含Generator函数的代码：

function* generatorExample() {
  yield 1;
  yield 2;
  return 3;
}

Regenerator会将其转换为一个状态机，大致如下：

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

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

        case 4:
          return _context.abrupt("return", 3);

        case 5:
        case "end":
          return _context.stop();
      }
    }
  }, generatorExample);
});