Babel 编译时报错：ReferenceError: regeneratorRuntime is not defined

在前端开发过程中，使用 Babel 编译代码是一项常规工作。然而，有时我们可能会遇到如下错误：

ReferenceError: regeneratorRuntime is not defined

这是因为浏览器不支持 ES6 或 ES7 中的 generator，因此需要使用 babel-polyfill 进行补丁。

babel-polyfill

babel-polyfill 是 Babel 提供的一个用于模拟完整的 ES6 兼容环境的 polyfill 库。当我们使用 ES6 或 ES7 中的某些特性时，babel-polyfill 会自动引入所需的 polyfill，以保证在浏览器中正确运行。

安装 babel-polyfill

使用 npm 安装 babel-polyfill：

npm install --save-dev babel-polyfill

然后在入口文件顶部引入 babel-polyfill：

import 'babel-polyfill';

示例代码

下面是一个使用 async/await 的示例：

async function main() {
  const res = await fetch('/api/data');
  const data = await res.json();
  console.log(data);
}

main();

如果不进行 polyfill，代码将无法正常运行并报错。修改代码如下：

// javascriptcn.com 代码示例
import 'babel-polyfill';

async function main() {
  const res = await fetch('/api/data');
  const data = await res.json();
  console.log(data);
}

main();

现在，代码就可以正常运行了。我们可以在任何现代浏览器中使用 ES6 和 ES7 中的特性，而不必担心兼容性问题。

总结

在使用 Babel 编译代码时，如果出现 ReferenceError: regeneratorRuntime is not defined 错误，可以考虑使用 babel-polyfill 进行 polyfill，以保证代码在浏览器中正确运行。

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