使用 Babel 出现 Uncaught ReferenceError: regeneratorRuntime is not defined

前言

在使用 Babel 编译 ES6 代码时，有时会出现 Uncaught ReferenceError: regeneratorRuntime is not defined 的错误。这个错误通常是由于 Babel 转换 ES6 的 async/await 语法时需要依赖 regeneratorRuntime，但是该变量并没有被正确的引入导致的。在本文中，我们将详细介绍这个问题并提供解决方案。

问题解决

安装 regenerator-runtime

首先，我们需要安装 regenerator-runtime，它就是一个支持 generator 函数的运行时。可以通过 npm 安装：

npm install regenerator-runtime

引入 regeneratorRuntime

在代码中，我们需要引入 regeneratorRuntime，通常有两种方式：

1. 使用 babel-plugin-transform-runtime

babel-plugin-transform-runtime 是一个 babel 插件，可以在转换 async/await 语法时自动引入 regeneratorRuntime。使用该插件，需要先安装：

npm install --save-dev babel-plugin-transform-runtime

然后在 .babelrc 配置文件中添加：

// javascriptcn.com 代码示例
{
  "plugins": [
    ["transform-runtime", {
      "helpers": false,
      "polyfill": false,
      "regenerator": true,
      "moduleName": "babel-runtime"
    }]
  ]
}

2. 在代码中手动引入

如果不想使用 babel-plugin-transform-runtime 插件，可以在代码中手动引入 regeneratorRuntime，例如：

import regeneratorRuntime from "regenerator-runtime";

async function foo() {
  await someAsyncTask();
}

foo();

示例代码

下面是一个示例代码，使用 babel-plugin-transform-runtime 插件自动引入 regeneratorRuntime：

// javascriptcn.com 代码示例
// index.js
async function foo() {
  await someAsyncTask();
}

foo();

// .babelrc
{
  "plugins": [
    ["transform-runtime", {
      "helpers": false,
      "polyfill": false,
      "regenerator": true,
      "moduleName": "babel-runtime"
    }]
  ]
}

总结

使用 Babel 编译 ES6 代码时，出现 Uncaught ReferenceError: regeneratorRuntime is not defined 的错误，通常是由于没有正确引入 regeneratorRuntime。我们可以通过安装 regenerator-runtime 并在代码中手动引入或使用 babel-plugin-transform-runtime 插件自动引入来解决这个问题。

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