在使用 JavaScript 开发中，我们经常会使用 async/await 关键字来处理异步操作，以确保代码的顺序性和清晰性。然而，在使用 Babel 转译器进行代码转换时，很多开发者发现在转换后的代码中，async/await 关键字并没有被正确地处理，导致错误或异常的出现。那么为什么我的 Babel 无法自动处理 async/await 语句呢？本文将深入分析这个问题，并提供相应的解决方案和指导意义。
问题起源
async/await 关键字在 ES2017 （ES8）标准中被正式引入，并且在许多现代浏览器中已经被支持。然而，在一些旧版本浏览器中可能无法正确解析这些关键字，因此我们需要使用 Babel 转译器将代码转换为可在各种浏览器中运行的 JavaScript 代码。
但是，很多开发者在使用 Babel 进行代码转换时，遇到了如下错误：
Uncaught ReferenceError: regeneratorRuntime is not defined
这个错误通常发生在使用 async/await 语句时，其根本原因是 Babel 不支持编译 async/await 语句，需要使用第三方插件或者手动引入 polyfill。那么我们该如何解决这个问题呢？
解决方案
1. 使用第三方插件
我们可以使用 @babel/plugin-transform-runtime 插件来处理 async/await 语法。该插件会自动引入 @babel/runtime-corejs3 依赖包，以提供相应的 API 和运行时环境，从而使得代码可以正确地运行。具体的使用方法如下：
首先安装依赖：
npm install --save-dev @babel/plugin-transform-runtime @babel/runtime-corejs3
然后在 Babel 配置文件 .babelrc.js 中加入如下代码：
module.exports = {
presets: ['@babel/preset-env'],
plugins: [
['@babel/plugin-transform-runtime', {
corejs: 3
}]
]
}在上面的配置中，@babel/preset-env 是 Babel 的预设插件，用于自动决定需要进行哪些转译操作，以确保代码可以在各个浏览器中正确的运行。而 @babel/plugin-transform-runtime 插件用于处理 async/await 语法，并且可以自动引入相应的依赖。
2. 手动引入 polyfill
另外，我们也可以手动引入 @babel/polyfill 依赖，并在代码中添加如下语句：
import '@babel/polyfill';
该依赖包可以提供所有 ES6 的 polyfill，而 async/await 语法则会被转换成相应的代码，从而确保了所有浏览器的兼容性。
总结
async/await 关键字是现代 JavaScript 开发中非常常用的语法，对于 Babel 无法自动处理 async/await 语句的问题，我们可以使用 @babel/plugin-transform-runtime 插件或者手动引入 @babel/polyfill 依赖，从而解决这个问题。除此之外，在使用 Babel 进行开发时，我们也可以根据需要选择相应的插件和预设，以确保代码的编译和运行都可以正确的进行。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/652d3aa27d4982a6ebea17e8