对于出现regeneratorRuntime is not defined问题的解决

出现问题的情况

• 在项目中使用了async/await,就开始报错regeneratorRuntime is not defined

出现问题的原因

• Babel在转化一些包的时候，比如说ES6转ES5，需要使用一些辅助函数，这些辅助函数就在babel-runtime这个单独的模块中，当缺失这个单独模块的时候他就会报错，我们需要去下载这个包

拓展

babel-polyfill是用来对于内核版本较低的浏览器不支持es6新语法的解决

• Babel默认只转换新的JavaScript语法（syntax），如箭头函数等，而不转换新的API，比如Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise等全局对象
• 详情点击

对于三个包的说明

• babel-polyfill仅仅是引用core-js、regenerator-runtime这两个npm包。

• @babel/runtime包含两个文件夹：helpers（定义了一些处理新的语法关键字的帮助函数）、regenerator（仅仅是引用regenerator-runtime这个npm包）。

• @babel/runtime-corejs2包含三个文件夹：core-js（引用core-js这个npm包）、helpers（定义了一些处理新的语法关键字的帮助函数）、regenerator（仅仅是引用regenerator-runtime这个npm包）。

解决问题

安装

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

配置

• 在webpack.config.js中进行配置

 use: {
     loader: 'babel-loader',
     options: {
         plugins: ["@babel/plugin-transform-runtime"]
     }
 }

详情点击