升级Babel7使用JavaScript新特性报错：regeneratorRuntime未定义

我来帮你搞定这个问题——升级Babel7的时候这个regeneratorRuntime的坑我之前也踩过，核心原因是你的依赖里混了Babel6和Babel7的版本，再加上@babel/preset-env的配置没到位，导致async/await需要的运行时没有被正确引入。下面一步步来解决：

第一步：清理冲突的旧依赖 #

你的package.json里同时存在Babel6（比如babel-core@6、babel-preset-env@1、旧版babel-polyfill）和Babel7的包，这两种版本完全不兼容，会导致各种奇怪的冲突。先把这些Babel6的依赖彻底删掉：

npm uninstall babel-core babel-preset-env babel-preset-es2015 babel-preset-stage-0 babel-polyfill

第二步：安装Babel7的正确依赖 #

Babel7已经废弃了旧的babel-polyfill，现在推荐用core-js和regenerator-runtime来提供polyfill支持。先安装必要的包：

# 生产依赖：提供polyfill和运行时
npm install --save core-js@3 regenerator-runtime
# 开发依赖：Babel核心工具链
npm install --save-dev @babel/cli @babel/core @babel/preset-env babel-loader babel-watch nodemon

第三步：配置@babel/preset-env #

你的.babelrc目前只启用了@babel/preset-env，但没有告诉它如何处理polyfill。更新配置，让它根据你的目标环境自动引入需要的polyfill：

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          // 根据你的项目环境调整，比如Node环境写"node": "current"，浏览器环境可以写"> 0.25%, not dead"
          "node": "current"
        },
        "useBuiltIns": "usage", // 自动按需引入polyfill
        "corejs": 3 // 指定core-js的版本，和你安装的core-js@3对应
      }
    ]
  ]
}

第四步：确保运行时被引入 #

如果你的项目是Node.js环境，上面的配置已经足够；如果是浏览器环境，需要在项目的入口文件最顶部添加一行代码，确保regeneratorRuntime被加载：

import 'regenerator-runtime/runtime';

备选方案：用@babel/plugin-transform-runtime（适合库开发） #

如果你是开发一个库，不想污染全局环境，可以用@babel/plugin-transform-runtime来提供沙箱化的运行时：

1. 安装依赖：

npm install --save-dev @babel/plugin-transform-runtime
npm install --save @babel/runtime

2. 修改.babelrc：

{
  "presets": ["@babel/preset-env"],
  "plugins": ["@babel/plugin-transform-runtime"]
}

做完这些步骤后，重新运行你的编译命令（比如babel-watch或者nodemon配合Babel），async/await应该就能正常工作，不会再出现regeneratorRuntime未定义的错误了。

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