Babel 是一个广受前端开发者欢迎的 JavaScript 编译器，用于将 ECMAScript 2015+ (ES6+) 代码转换为向后兼容的 JavaScript 代码。然而，当你在 Babel 转换后的代码中使用了 async/await, generator 等函数时，很可能会遇到一个错误: "ReferenceError: regeneratorRuntime is not defined"。
这是因为 Babel 虽然在代码中使用了 regeneratorRuntime，但在运行时却没有添加这个运行时库。这个问题可以通过两种方法解决。
方法 1: 添加 regeneratorRuntime 依赖
方法 1 是添加 regeneratorRuntime 依赖。使用 npm 安装 babel-polyfill，然后在代码中导入这个依赖就可以了。
npm i -S babel-polyfill
在代码中导入：
import "babel-polyfill";
这个方法虽然简单，但是它的缺点是需要将整个 polyfill 导入到你的代码中，增加了代码体积和加载时间。
方法 2: 配置 babel-preset-env
方法 2 是配置 babel-preset-env。在使用 babel-preset-env 时，需要在 .babelrc 文件中配置 "useBuiltIns" 为 "usage"，这样 babel-preset-env 会根据你的代码中实际使用的功能来导入对应的 polyfill。修改 .babelrc 文件如下：
{
"presets": [
["env", {
"useBuiltIns": "usage",
"corejs": 3
}]
]
}其中，corejs:3 是指使用 core-js@3，这是 polyfill 的依赖版本。如果未指定此选项，则默认使用 core-js@2. 这个方法可以有效减小代码体积和加载时间。
示例代码
下面是一个示例代码，通过方法 2 可以解决 "ReferenceError: regeneratorRuntime is not defined" 的问题：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
------------ --------------- ------------------ -- --- ---------------
------- ---------------------------------------------------------------------------------------
------- --------------------------------------------------------------------------------------
-------
------
---- ---------------
--------
----- -------- ----------- -
----- -------- - ----- ------------------------------------------------------
----- ---- - ----- ----------------
------ -----
-
------ -- -- -
----- ---- - ----- ------------
---------------------------------------- - ---------------------
-----
---------
------- ------------------
----- -------- ----------- -
----- -------- - ----- ------------------------------------------------------
----- ---- - ----- ----------------
------ -----
-
------ -- -- -
----- ---- - ----- ------------
---------------------------------------- - ---------------------
-----
---------
--------
------------------------------------------------------------------------------ -
-------- -------- -
-------------- --------
--------- -
---
--
---------
-------
-------
在上述代码中，我使用了两种方式解决了 "ReferenceError: regeneratorRuntime is not defined" 的问题。首先，我在 head 部分引入了 babel-polyfill 的依赖。其次，我在页面中使用了 babel-standalone 这个 CDNs，转换了所有的 script 标签内的代码，并通过 "useBuiltIns" 为 "usage" 和 "corejs" 为 3 的配置，自动导入了所需要的 polyfill。
需要注意的是，在生产环境中，我们不应该使用 babel-standalone 这种方式，而应该在打包工具（如 Webpack）中配置相应的插件解决这个问题。
总结
Babel 在将 ES6+ 代码转换为兼容性代码的同时，也需要处理相应的运行时问题。在使用 async/await, generator 等函数时，会需要添加 regeneratorRuntime 这个依赖。这篇文章详细的介绍了两种方法解决这个问题，并提供了相应的示例代码供读者参考。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66441dc8d3423812e4205638