前言
在使用 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 配置文件中添加：
-- -------------------- ---- -------
-
---------- -
--------------------- -
---------- ------
----------- ------
-------------- -----
------------- ---------------
--
-
-2. 在代码中手动引入
如果不想使用 babel-plugin-transform-runtime 插件，可以在代码中手动引入 regeneratorRuntime，例如：
import regeneratorRuntime from "regenerator-runtime";
async function foo() {
await someAsyncTask();
}
foo();示例代码
下面是一个示例代码，使用 babel-plugin-transform-runtime 插件自动引入 regeneratorRuntime：
-- -------------------- ---- -------
-- --------
----- -------- ----- -
----- ----------------
-
------
-- --------
-
---------- -
--------------------- -
---------- ------
----------- ------
-------------- -----
------------- ---------------
--
-
-总结
使用 Babel 编译 ES6 代码时，出现 Uncaught ReferenceError: regeneratorRuntime is not defined 的错误，通常是由于没有正确引入 regeneratorRuntime。我们可以通过安装 regenerator-runtime 并在代码中手动引入或使用 babel-plugin-transform-runtime 插件自动引入来解决这个问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6556d4f2d2f5e1655d13398e