Uncaught ReferenceError: regeneratorRuntime is not defined

麓谷小哥哥2024-03-15 11:07

vue2 的项目，控制台报 Uncaught ReferenceError: regeneratorRuntime is not defined 这个错误，虽然并没有影响业务，但是错误日志太多了。

查看错误堆栈，是一个 commonjs 打包后的cdn文件里报的，原因就是 es6 转 es5 。不能处理 Promise 这种异步的写法。

网上搜搜，很多文章告诉你使用 @babel/plugin-transform-runtime 进行编译，但是作为被 vue-cli 这种宠坏的前端来说，webpack 只是听过其名字，你要他去编译，根本无从下手。

当然我也只是好一点点，知道要在项目根目录下加个 .babelrc 的文件，其他也是两眼摸黑。

首先查看项目的 webpack 版本

2024年了，webpack5 正不流行（vite新秀），所以项目很可能是，webpack 4.x \ webpack 3.x 的，相信老一辈前端很爱玩这个。

于是，你安装 @babel 开头人包是不对的，这种基本是 node 16 以上的版本出来的了，报错机会极大。

所以你看看你的项目里安装的是 babel-core ，应该不是 @babel/core 那么，基本就知道了。

babel-core 6.x , 最新的版本可能行不通了 babel-preset-env babel-plugin-transform-runtime , 对应的 @babel/plugin-transform-runtime 也是行不通

配置babel

还有人叫你改 webpack.config.js 的，不知道为什么，我的也没有生效。

选项 polyfill

`polyfill`

boolean，默认为 true。

是否切换新的内置插件（Promise，Set，Map等）为使用非全局污染的 polyfill。

.babelrc 文件加入如下代码：

js 复制代码

{
  "presets": [

    ["env", { "modules": false }],

    "stage-2"

  ],

  "plugins": ["transform-runtime"],

  "comments": false,
  "plugins": [
      [
          "transform-runtime",
          {
              "helpers": false,
              "polyfill": false,
              "regenerator": true, //必须
              "moduleName": "babel-runtime", //必须
          }
      ]
  ]
}

编译出来不报错就成功了。如果对你有帮助，记得一键三连。