出现问题的情况


  • 在项目中使用了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-jsregenerator-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"]
     }
 }

详情点击

Logo

基于 Vue 的企业级 UI 组件库和中后台系统解决方案,为数万开发者服务。

更多推荐