在使用ES6语法和一些新的JavaScript功能时，你可能会遇到一个“RegeneratorRuntime未定义”的错误。这是由于Babel将async/await等高级语法转换为生成器函数，并依赖于RegeneratorRuntime运行时库来实现。
问题原因
在某些情况下，当您使用@babel/preset-env作为Babel预设时，它不会自动包含RegeneratorRuntime运行时库。这意味着您需要手动导入该库或将其添加到webpack配置中。
解决方法
方法一：安装并使用@babel/plugin-transform-runtime
@babel/plugin-transform-runtime是一个Babel插件，它将在编译过程中引入所需的辅助函数和运行时库，而不是像默认情况下那样直接嵌入到您的代码中。这样可以减小生成的文件大小并避免重复代码问题。
npm install --save-dev @babel/plugin-transform-runtime
然后在您的.babelrc文件中添加以下内容：
-- -------------------- ---- -------
-
---------- -
----------------------------------- -
--------- --
---------- -----
-------------- -----
--------------- -----
--
-
-注意：useESModules应设置为false以确保正确的RegeneratorRuntime行为。
方法二：手动导入RegeneratorRuntime
如果您希望自己控制所需的运行时库版本，并且不想使用插件来引入它，您可以手动导入RegeneratorRuntime。
- 安装
regenerator-runtime
npm install --save regenerator-runtime
- 在您的代码中添加以下导入语句：
import 'regenerator-runtime/runtime';
方法三：在webpack配置中添加运行时
如果您使用了webpack作为构建工具，则可以将运行时库添加到webpack配置中。
- 安装
@babel/runtime和@babel/runtime-corejs3
npm install --save-dev @babel/runtime @babel/runtime-corejs3
- 将以下内容添加到您的webpack配置文件中：
-- -------------------- ---- -------
-------------- - -
-- ---
------- -
------ -
-
----- ----------
-------- ----------------------------------
---- -
------- ---------------
-------- -
-------- ---------------------- - ------- -- ------------ ------- ----
-------- -----------------------------------
-
-
-
-
--
-- ---
--这将确保您的应用程序包括所需的运行时并正确运行。
示例代码
下面是一个使用async/await的简单示例，其中包含使用方法一和方法二解决“RegeneratorRuntime未定义”问题的代码。
-- -------------------- ---- -------
------ ------------------------------
----- ---- -
----- ----------- -
----- -------- - ----- ------------------------------------------------------
----- ---- - ----- ----------------
------ -----
-
-
----- ---- - --- -------
------------------------------------- -------------------- ---- -------
-
------- ------- --------
----------- -------
-------- --------------------
-------- --------------- --------
---------- ----------------
---------- -
------- ------------------
-------------- -------------- ------------- ------------
----- -------- --------- ----------
-
-总结
当您在使用一些新的JavaScript功能时，可能会遇到“RegeneratorRuntime未定义”的错误。本文提供了三种解决该问题的方法：使用@babel/plugin-transform-runtime插件、手动导入RegeneratorRuntime运行时库以及在webpack配置中添加运行时库。希望这
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/8547
