JavaScript中await语句在代码打包工具（Vite/Webpack）中怎么被降级转译-js教程-PHP中文网

await 本身不会被单独降级，而是 async/await 整体被编译为 Promise 链或 generator 形式：esbuild 在 target 为 ES2015+ 时保留原语法，Babel 在 ES5 目标下转为 .then() 链或 regenerator-runtime 包装的 generator；降级由编译器（Babel/esbuild）根据 target 或 browserslist 配置决定，打包工具仅集成执行。

javascript中await语句在代码打包工具（vite/webpack）中怎么被降级转译

await 本身不会被降级转译，而是由 async/await 语法整体被编译为 Promise 链或生成器（generator）形式的兼容代码。 打包工具如 Vite 或 Webpack 本身不直接处理语法降级，真正起作用的是它们集成的 JavaScript 编译器（通常是 Babel 或 esbuild），而降级目标由项目配置的 target（Vite）或 browserslist（Webpack + Babel）决定。

降级依赖编译器而非打包工具

Vite 默认使用 esbuild 进行快速构建和 minify，它支持现代语法但不降级（即默认输出 ES2015+）。若需兼容旧浏览器（如 IE11 或早期 Android WebView），必须显式启用降级：

Vite 中通过 build.target 配置（例如 "es2015"），触发 esbuild 的降级能力（esbuild 仅支持降到 ES2015，且对 async/await 会转成基于 Promise 的结构，不生成 generator）
更深度的降级（如到 ES5、支持 IE）需搭配 Babel：Vite 可通过 @vitejs/plugin-react-swc（SWC）或 @vitejs/plugin-react（含 Babel）实现；Webpack 则通常用 @babel/preset-env + browserslist

async/await 被转成什么？

以一段典型代码为例：

async function fetchUser() {
  const res = await fetch('/api/user');
  return res.json();
}

在目标设为 ES2015 时（esbuild）：

Java调试

通过 JDWP 实现 Java 远程调试：连接远程 JVM、设置断点、单步执行代码、查看变量值、获取调用栈。适用于需要调试远程 Java 应用、排查运行时状态、追踪代码执行流程的场景。术语注解 JDWP：Java Debug Wire Protocol，Java 调试有线协议（Java 远程调试底层通信协议） remote JVM：远程 Java 虚拟机 step through code：代码单步调试（步入 / 步过 / 步出调试） inspect variables：变量查看 / 变量检视 stac

下载

保留 async/await 关键字（因 ES2015 已支持）
不转换——因为 ES2015 规范已原生定义了 async function 和 await 行为

在目标设为 ES5 时（Babel + preset-env）：

整个函数被重写为返回 Promise 的普通函数
await 被展开为 .then() 链，可能嵌套多层回调
若启用 regeneratorRuntime（需引入 core-js 或 regenerator-runtime），则可能转为 function* + runtime.mark + runtime.wrap 的 generator 形式

关键配置项对照

常见降级配置位置：

Vite：vite.config.js 中 build: { target: 'es2015' }；如需 Babel，安装 @babel/core 和 @vitejs/plugin-react 并启用
Webpack：在 .babelrc 或 babel.config.js 中设置 preset-env，并声明 "targets": { "ie": "11" }；同时确保 core-js/stable 和 regenerator-runtime/runtime 被正确 import
注意 polyfill：即使语法被转译，Promise、fetch、Array.from 等运行时 API 仍需手动 polyfill（如通过 core-js）