解决 Babel 编译 ES6 代码时出现的 ReferenceError：regeneratorRuntime is not defined 错误
前言
在使用 Babel 编译 ES6 代码时，有可能会遇到 ReferenceError：regeneratorRuntime is not defined 错误。本文将介绍该错误的原因以及解决方法，并提供相关示例代码供读者参考学习。
错误原因
在 ES6 中，有一些新的语法特性如 async/await 等需要使用到编译器提供的 polyfill 来实现。而在 Babel 中，使用 regenerator 编译器时，需要在全局环境中提供 regeneratorRuntime 对象，用来处理 async/await 等语法。如果缺少该对象，就会出现 ReferenceError：regeneratorRuntime is not defined 错误。
解决方法
下面介绍两种解决该错误的方法：
方法一：手动引入 regenerator 对象
手动引入 regenerator 对象是一种经典且较为简单的解决该错误的方法。可以先安装 regenerator-runtime，然后在代码中手动引入该对象，示例如下：
import 'regenerator-runtime/runtime';
async function asyncFunc() {
await somePromise();
}上述代码中，通过 import 引入 regenerator-runtime 包，并在 asyncFunc 中使用异步函数 async/await。这样，在编译时就会自动将该代码转换为 ES5 兼容的代码。
方法二：使用 @babel/plugin-transform-runtime 插件
@babel/plugin-transform-runtime 是一个 Babel 的插件，可以在代码中自动注入 regeneratorRuntime 对象。需要先安装该插件，然后在 .babelrc 文件中配置 transform-runtime，示例如下：
{
"plugins": [
["@babel/transform-runtime", {
"regenerator": true
}]
]
}上述 .babelrc 配置文件中，包含了一个 @babel/transform-runtime 插件，并开启了 regenerator 功能。这样，在编译时，就会自动将相应的代码添加到生成的文件中。
示例代码
下面是一个使用 regeneratorRuntime 对象的示例代码：
-- -------------------- ---- ------- ------ ------------------------------ ----- -------- ------------- - ----- ------ - ----- -------------------------- ------ -------------- - --------------------------- -- - ---------------------- -------------- -- - ------------------- ---
上述代码中，我们先通过 import 引入 regenerator-runtime 包。然后定义一个异步函数 getUserInfo，使用了 async/await 语法。在该函数中，我们使用 fetch 方法获取 /api/getUserInfo 接口返回的数据，并将其解析为 JSON 格式。在后面的 then 和 catch 语句块中，根据接口返回的结果进行相应的操作。
结语
在使用 Babel 编译 ES6 代码时，出现 ReferenceError：regeneratorRuntime is not defined 错误是比较常见的问题。通过本文中介绍的两种方法，读者可以轻松解决该错误，并顺利地实现异步编程的相关特性。
Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/67939c0d504e4ea9bd7f3228