Babel 编译时提示 ReferenceError: regeneratorRuntime is not defined 的解决办法

在使用 Babel 进行前端开发的过程中，有时候会遇到 ReferenceError: regeneratorRuntime is not defined 的错误提示。这个错误是由于 Babel 编译 ES6/ES7 代码时，使用了 generator 函数和 async/await 等语法，但是编译后的代码中缺少了 regeneratorRuntime 运行时。

什么是 regeneratorRuntime？

regeneratorRuntime 是由 Babel 编译器生成的一个运行时库，用于支持 generator 函数和 async/await 等语法。它是一个非常小的库，只有几百行代码，但是在 Babel 编译后的代码中必不可少。

解决办法

方法一：安装 @babel/plugin-transform-runtime

@babel/plugin-transform-runtime 是一个用于解决 Babel 编译时 regeneratorRuntime 未定义错误的插件。它会将编译后的代码中的 regeneratorRuntime 替换为一个运行时库，从而解决这个错误。

首先，安装 @babel/plugin-transform-runtime：

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

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

{
  "plugins": [
    ["@babel/plugin-transform-runtime", {
      "corejs": 3
    }]
  ]
}

注意，这里的 corejs 版本需要根据你的项目需求进行调整，可以使用 corejs@2 或 corejs@3。

方法二：安装 @babel/polyfill

@babel/polyfill 是一个用于解决 Babel 编译时 regeneratorRuntime 未定义错误的库。它会将 regeneratorRuntime 和其他一些必要的运行时库打包到你的代码中，从而解决这个错误。

首先，安装 @babel/polyfill：

npm install --save @babel/polyfill

然后，在入口文件中引入 @babel/polyfill：

import '@babel/polyfill';

或者在 HTML 文件中通过 script 标签引入：

<script src="node_modules/@babel/polyfill/dist/polyfill.min.js"></script>

注意，使用 @babel/polyfill 会增加代码体积，可能会影响页面加载速度。

示例代码

下面是一个示例代码，演示如何使用 @babel/plugin-transform-runtime 和 @babel/polyfill 解决 regeneratorRuntime 未定义错误：

// javascriptcn.com 代码示例
// 使用 generator 函数
function* gen() {
  yield 1;
  yield 2;
}

// 使用 async/await
async function test() {
  const result = await Promise.resolve('Hello, world!');
  console.log(result);
}

// 使用 @babel/plugin-transform-runtime
import '@babel/polyfill';
import 'core-js/modules/es.promise';
import 'core-js/modules/es.array.iterator';

// 使用 @babel/polyfill
import regeneratorRuntime from 'regenerator-runtime';

gen();
test();

总结

Babel 编译时提示 ReferenceError: regeneratorRuntime is not defined 的解决办法有两种：安装 @babel/plugin-transform-runtime 或者安装 @babel/polyfill。使用 @babel/plugin-transform-runtime 可以减小代码体积，但需要配置 corejs 版本；使用 @babel/polyfill 可以简单快捷地解决问题，但会增加代码体积。在选择解决办法时需要根据项目需求进行调整。

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