在前端开发中，ES6 已经成为了必不可少的一部分。但是，由于不同的浏览器对 ES6 的支持程度不同，很多时候我们需要使用 Babel 来将 ES6 代码转换为 ES5 代码。然而，在使用 Babel 编译 ES6 代码时，有时会遇到 "ReferenceError: regeneratorRuntime is not defined" 错误。本文将介绍这个错误的原因以及解决方法。
问题描述
在使用 Babel 编译 ES6 代码时，有时会遇到以下错误：
ReferenceError: regeneratorRuntime is not defined
这个错误通常出现在使用 ES6 的生成器函数时，例如：
function* myGenerator() {
yield 1;
yield 2;
yield 3;
}问题原因
这个错误的原因是因为 ES6 的生成器函数需要使用 regeneratorRuntime 运行时库。但是，Babel 默认不会将 regeneratorRuntime 运行时库包含在编译后的代码中。因此，当我们在浏览器中运行编译后的代码时，会出现 "ReferenceError: regeneratorRuntime is not defined" 错误。
解决方法
要解决这个问题，我们需要在编译后的代码中包含 regeneratorRuntime 运行时库。有两种方法可以实现这个目标。
方法一：手动引入 regeneratorRuntime 运行时库
我们可以手动引入 regeneratorRuntime 运行时库。首先，我们需要安装 regenerator-runtime 包：
npm install regenerator-runtime
然后，在我们的代码中手动引入 regeneratorRuntime 运行时库：
import "regenerator-runtime/runtime";
这样，在编译后的代码中就会包含 regeneratorRuntime 运行时库，从而解决 "ReferenceError: regeneratorRuntime is not defined" 错误。
方法二：使用 @babel/plugin-transform-runtime 插件
另一种方法是使用 @babel/plugin-transform-runtime 插件。这个插件会自动将 regeneratorRuntime 运行时库包含在编译后的代码中。
首先，我们需要安装 @babel/plugin-transform-runtime 插件和 regenerator-runtime 运行时库：
npm install --save-dev @babel/plugin-transform-runtime npm install --save regenerator-runtime
然后，在 .babelrc 文件中配置 @babel/plugin-transform-runtime 插件：
-- -------------------- ---- -------
-
---------- -
-
----------------------------------
-
--------- -
-
-
-
-其中，corejs 选项指定了使用的 core-js 版本。如果你不想使用 core-js，可以将这个选项省略。
现在，我们就可以使用 Babel 编译 ES6 代码了，而不会出现 "ReferenceError: regeneratorRuntime is not defined" 错误。
示例代码
下面是一个示例代码，演示了如何在 Babel 编译 ES6 生成器函数时避免 "ReferenceError: regeneratorRuntime is not defined" 错误：
-- -------------------- ---- ------- -- -------- ------ ------------------------------ --------- ------------- - ----- -- ----- -- ----- -- - --- ------ ----- -- -------------- - ------------------- -
编译后的代码：
-- -------------------- ---- ------- -- -------- ---- -------- --------------------------------------- --------- ------------- - ----- -- ----- -- ----- -- - --- ---- --------- - -------------- ------ ------- - ------------------------ - --- ----- - ------------ ------------------- -
可以看到，在编译后的代码中，已经包含了 regeneratorRuntime 运行时库。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d3efd5a941bf71347797f4
