JavaScript 中 Babel 怎么配置转换 async/await 异步代码-js教程-PHP中文网

要让 Babel 正确转换 async/await，需确保运行时支持 generator 和 Promise，并通过 @babel/preset-env（推荐）或手动配置 @babel/plugin-transform-async-to-generator 与 @babel/plugin-transform-regenerator 插件实现语法转译与辅助函数注入，同时必须引入 regenerator-runtime 运行时依赖。

javascript 中 babel 怎么配置转换 async/await 异步代码

要让 Babel 正确转换 async/await，关键不是单独配某个插件，而是确保环境支持 generator + Promise 的运行时基础，并通过 preset 或插件启用语法转译和辅助函数注入。

必须启用 @babel/preset-env（推荐方式）

它会自动识别 async/await 语法，并根据目标环境决定是否需要转译，同时按需引入 regenerator-runtime 和相关 polyfill：

安装： npm install --save-dev @babel/preset-env

配置 .babelrc 或 babel.config.json：

{
  "presets": [
    ["@babel/preset-env", {
      "targets": { "chrome": "50", "ie": "11" },
      "useBuiltIns": "usage",
      "corejs": 3
    }]
  ]
}

这个配置会让 Babel 把 async function() 编译成 function*() + 自动执行器（_asyncToGenerator），并自动引入 regenerator-runtime 所需的 helper

手动指定插件（适合精细控制）

如果你不用 preset-env，可显式添加两个核心插件：

Java Api Extractor

从 Java 项目中提取 Controller 层接口定义为 JSON 数据。

下载

@babel/plugin-transform-async-to-generator：把 async/await 转为 generator 函数（yield）
@babel/plugin-transform-regenerator：注入 regeneratorRuntime 运行时支持（必需，否则浏览器报 regeneratorRuntime is not defined）

安装并配置示例：

npm install --save-dev @babel/plugin-transform-async-to-generator @babel/plugin-transform-regenerator

{
  "plugins": [
    "@babel/plugin-transform-async-to-generator",
    "@babel/plugin-transform-regenerator"
  ]
}

别忘了运行时依赖（常被忽略）

仅语法转译不够——生成的代码依赖 regeneratorRuntime 全局对象。有两种方式提供：

方式一（推荐）：在入口文件顶部导入：
```
import 'regenerator-runtime/runtime';
```
（需先安装：npm install --save regenerator-runtime）
方式二：用 @babel/polyfill（已废弃，不建议）或 core-js/stable + regenerator-runtime/runtime 组合导入
注意：Webpack 等打包工具不会自动注入 regeneratorRuntime，漏掉就会运行时报错

验证是否生效的小技巧

写个简单 async 函数，编译后检查输出：

输入：async function foo() { return await Promise.resolve(42); }
正确输出应含 function* foo$()、_asyncToGenerator 调用，以及 regeneratorRuntime.mark 等调用
若输出仍是原样 async，说明 preset/plugins 未生效或 targets 设置过高（如只设 node: "current" 就可能跳过转译）

Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南