背景
现在越来越多的 JavaScript 开发者开始使用 ES6/7/8 的新特性，其中包括 async/await 语法。然而，由于很多浏览器和 Node.js 版本还不支持这些语法，为了能够在旧版本中使用这些新特性，我们需要使用 Babel 来将这些代码转换为 ES5 语法。
在使用 babel-preset-env 以及 babel-polyfill 插件的情况下，一般来说，我们可以很方便的使用 async/await 语法。但是，有些同学在使用这些插件的时候，可能会遇到一些报错问题。
本篇文章旨在介绍使用 babel-preset-env 和 babel-polyfill 插件时可能遇到的报错问题，并提供解决方案。
报错信息
下面是一个常见的 async/await 编译报错信息：
ReferenceError: regeneratorRuntime is not defined
这个报错信息是由于 babel 编译 async/await 时，会使用 regeneratorRuntime 库，在转换代码时需要运行时支持。如果你没有手动引入这个支持库，很可能会遇到上述报错信息。
解决方案
方案一：使用 babel-polyfill
这个问题的解决方案非常简单，只需要在代码中引入 babel-polyfill 即可：
import "babel-polyfill";
这里的 import "babel-polyfill" 会将整个 core-js 库以及 regenerator-runtime 库（这就是你需要的支持库）都打包进去，然后在代码运行前，先运行这些库，确保 async/await 语法能够正常工作。
方案二：按需加载
如果你的项目中只需要使用 async/await 中的某些特性，那么你可以考虑按需加载 regenerator-runtime 库。
具体做法是：
import 'core-js/modules/es.promise'; import 'core-js/modules/es.array.iterator'; import regeneratorRuntime from "regenerator-runtime"; // ...
这里，我们只需要引入 async/await 语法所需要的核心库和支持库，然后手动获取 regeneratorRuntime 对象，确保代码正常运行即可。
需要注意的是，这种做法需要你手动引入相应的库，对于代码体积会产生一定的影响。
示例代码
这里给出一个使用 async/await 语法的示例代码，让大家更加清楚地了解这个问题的实际应用场景以及解决方案。
-- -------------------- ---- -------
------ -----------------
----- ------- -
----- --------- -
----- -------- - ----- --------------------------------------
----- ---- - ----- ----------------
------ -----
-
-
----- -------- - --- ----------
---------------------------- -- -------------------在这个示例代码中，我们模拟了一个使用 async/await 语法获取数据的场景。在代码的开头，我们使用了 import "babel-polyfill" 来解决上面提到的报错问题。
当然，如果你使用按需加载的方式，那么上述代码可以改写为：
-- -------------------- ---- -------
------ -----------------------------
------ ------------------------------------
------ ------------------ ---- ----------------------
----- ------- -
----- --------- -
----- -------- - ----- --------------------------------------
----- ---- - ----- ----------------
------ -----
-
-
----- -------- - --- ----------
---------------------------- -- -------------------结论
在大多数情况下，使用 babel-polyfill 就可以轻松解决 async/await 编辑报错的问题，不需要手动引入 regeneratorRuntime 库。
然而，如果你需要按需加载支持库，可以考虑手动引入相应的库，但同时需要注意代码体积的问题。
以上就是本篇文章的全部内容，希望能够帮助大家解决 async/await 编译时的报错问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/676f158ee9a7045d0d700b9b