Uncaught ReferenceError: regeneratorRuntime is not defined

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

是否切换新的内置插件(PromiseSetMap等)为使用非全局污染的 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", //必须
          }
      ]
  ]
}

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

相关推荐
晓13135 小时前
JavaScript加强篇——第四章 日期对象与DOM节点(基础)
开发语言·前端·javascript
烛阴6 小时前
JavaScript函数参数完全指南:从基础到高级技巧,一网打尽!
前端·javascript
chao_7897 小时前
frame 与新窗口切换操作【selenium 】
前端·javascript·css·selenium·测试工具·自动化·html
天蓝色的鱼鱼7 小时前
从零实现浏览器摄像头控制与视频录制:基于原生 JavaScript 的完整指南
前端·javascript
阳火锅9 小时前
Vue 开发者的外挂工具:配置一个 JSON,自动造出一整套页面!
javascript·vue.js·面试
每天吃饭的羊9 小时前
react中为啥使用剪头函数
前端·javascript·react.js
多啦C梦a9 小时前
【适合小白篇】什么是 SPA?前端路由到底在路由个啥?我来给你聊透!
前端·javascript·架构
薛定谔的算法9 小时前
《长安的荔枝·事件流版》——一颗荔枝引发的“冒泡惨案”
前端·javascript·编程语言
轻语呢喃9 小时前
每日LeetCode : 两数相加--链表操作与进位的经典处理
javascript·算法
每天吃饭的羊10 小时前
箭头函数(Arrow Functions)和普通函数(Regular Functions)
开发语言·javascript·ecmascript