如何在React结合Webpack与TypeScript中使用async/await？解决regeneratorRuntime未定义报错

报错根因 #

async/await 经过 Babel/TS 转译后，生成的代码会依赖全局存在的 regeneratorRuntime 变量。如果打包链路没有正确配置转译规则、按需注入对应运行时，运行时就会因为找不到该全局变量抛出错误。

正确配置步骤 #

• 安装配套依赖
  执行命令安装两个核心依赖包：
  • npm install --save-dev @babel/plugin-transform-runtime
  • npm install --save @babel/runtime
    该插件的作用是自动在转译后的 async、生成器函数代码中按需注入运行时引用，不需要手动在全局入口导入 polyfill，既避免全局变量污染，也能减少冗余代码带来的包体积增长。
• 调整 Babel 配置
  确保 babel.config.js 满足两个核心要求：
  1. @babel/preset-env 配置中，将 useBuiltIns 设置为 usage，匹配项目安装的 corejs 版本（推荐使用 corejs@3），同时配置适配的目标浏览器范围
  2. 插件列表中加入 @babel/plugin-transform-runtime，不要手动关闭插件默认开启的 regenerator 注入能力
     参考配置示例：

  module.exports = {
    presets: [
      [
        "@babel/preset-env",
        {
          targets: "> 0.25%, not dead",
          useBuiltIns: "usage",
          corejs: 3
        }
      ],
      "@babel/preset-react",
      "@babel/preset-typescript"
    ],
    plugins: ["@babel/plugin-transform-runtime"]
  }
  

• 修正 TypeScript 配置
  检查 tsconfig.json 的三个关键配置项：
  1. target 编译目标设置为 ES5/ES2015 级别的兼容版本，不要直接设置为 ESNext，否则转译流程会跳过 async 语法的兼容处理
  2. 开启 downlevelIteration 配置，保证转译后的生成器函数可被正常迭代
  3. module 字段设置为 ESNext，配合 Webpack 的 tree-shaking 能力剔除冗余代码
• 排查 Webpack 配置漏项
  重点检查三个常见踩坑点：
  1. babel-loader 的匹配规则需要覆盖项目下 .ts、.tsx、.js、.jsx 后缀的源码文件，不要将 TypeScript 文件排除在 Babel 转译范围外
  2. babel-loader 的 exclude 规则不要错误拦截 @babel/runtime 相关包的转译流程
  3. 不需要手动在项目入口文件添加 import 'regenerator-runtime/runtime'，接入 @babel/plugin-transform-runtime 后会自动完成按需注入，手动全局导入会造成不必要的包体积冗余

快速排错清单 #

• 检查项目安装的 core-js 版本与 Babel 配置中声明的 corejs 版本是否一致，版本不匹配会导致 polyfill 加载失效
• 检查 Webpack 的 output.libraryTarget 配置，如果是类库开发模式设置，会导致注入的运行时变量不在全局作用域下，触发变量未定义的报错
• 检查是否存在多份 Babel 配置（比如根目录同时存在 .babelrc 与 babel.config.js），配置规则互相覆盖导致 transform-runtime 插件实际没有生效

内容的提问来源于stack exchange，提问作者Luiz Gustavo