使用async/await时出现regeneratorRuntime is not defined错误信息问题：在项目中

问题：在项目中使用async/await时，浏览器出现regeneratorRuntime is not defined错误信息

原因：

因为async/await是ES7的内容，babel在转译async/await时生成的代码里使用了regeneratorRuntime这个变量，而这个变量是放在regenerator-runtime这个polyfill库中。所以在我们项目中如果没有引入polyfill库的话，使用中找不到这个变量，故而自然会报undefined错误。

解决：

（不推荐）方法一：

而我们需要做的就是想办法让浏览器能够支持async/await语法，将我们写的代码转化为浏览器能识别的代码，所以需要安装babel-plugin-transform-runtime插件，它可以帮助我们去将我们编写的代码转译成ES5，这样浏览器就能识别了。同时它还可以避免手动引入 import的痛苦，并且它还做了公用方法的抽离。比如说我们有100个模块都使用promise，但是promise的polyfill仅仅存在1份。这就是 babel-plugin-transform-runtime 插件的作用

第一步：npm install --save-dev @babel/plugin-transform-runtime
在build文件夹下的webpack.base.conf.js文件配置loader

{
  test: /\.js$/,
  loader: 'babel-loader',
  options: {
     plugins: ["@babel/plugin-transform-runtime"]
  }
}

在转换 ES2015 语法为 ECMAScript 5 的语法时，babel 会需要一些辅助函数，babel 提供了 transform-runtime 来将这些辅助函数“搬”到一个单独的模块 babel-runtime 中，这样做能减小项目文件的大小

完成上述的两步之后regeneratorRuntime问题得以解决，可是又出现了新的问题导致项目运行不起来，VScode终端出现Requires Babel "^7.0.0-0", but was loaded with "6.26.3"

这是因为安装的babel将前端环境更新到babel7，jest-babel之前是基于babel6的，所以就会报这个错误。

所以这个时候如果我们遇到了这个问题的话就还需升级一下cnpm i babel-core@^7.0.0-bridge.0 @babel/core regenerator-runtime，升级之后我们还需要对.babelrc文件配置一下，我的做法是把.babelrc文件原本的预设（presets）注释掉

 "presets": [
    // [
    //   "env",
    //   {
    //     "modules": false,
    //     "targets": {
    //       "browsers": [
    //         "> 1%",
    //         "last 2 versions",
    //         "not ie <= 8"
    //       ]
    //     }
    //   }
    // ],
    // "stage-2"
  ],

之所以要注释掉预设（presets），是因为如果不注释的话他就会报错Plugin/Preset files are not allowed to export objects, only functions这条报错信息是因为babel的版本冲突

（推荐）方法二：

第一步：npm install --save-dev @babel/plugin-transform-runtime
在build文件夹下的插件(plugins) 进行配置

  "plugins": [
    [
      "transform-runtime",
      {
        "helpers": false,//默认为true，切换是否内联babel或者环境本来存在的某些对象方法函数（classCallCheck，extends等），在调用模块名字时将被替换名字    
        "polyfill": false,//默认值为true，表示是否把内置的东西(Promise, Set, Map)等转换成非全局污染的,此选项在 v7 中被删除，只是将其设为默认值。    
        "regenerator": true,//默认为true,切换生成器函数是否转换为使用不污染全局范围的再生器运行时
        "moduleName": "babel-runtime"//默认值为 babel-runtime，当调用辅助 设置模块（module）名字/路径
      }
    ]
  ]

总结：

好了，这就是我在开发中遇到的问题，在经过第一种方法反复试验后才看见有第二种解决办法的思路，也折腾了我许久，所以打算记录下来。

因为这是我的第一篇文章，所以有不足的地方或任何错误，请批评指教。最后说一句求点赞求关注，希望我的这篇文章对你们有所帮助，喜欢的加个关注，点个赞收藏收藏，要是能分享就再好不过了，哈哈哈。