Vue - 使用ES2021语法报错问题处理

Vue使用ES2021语法报错问题处理

起因

项目技术栈:vue2.x + cli3.x + antDesign1.x + …

我在使用ES2021语法后,运行后报错了,报错代码如下:

this.dataList = res.map(i=>{
    //以下两行代码报错
    //??= 属于逻辑判断运算符,是ES2021的语法
    i['assigneeId'] ??= ''; 
    i['assigneeType'] ??= 'role';
    return i
})

报错内容:

You may need an additional loader to handle the result of these loaders.

原因

@vue/cli-plugin-babel3.x及以下版本估计只支持到ES2015,而@vue/cli-plugin-babel4.x则支持到ES2021甚至更高。由于cli4.x的@vue/cli-plugin-babel默认也是4.x的,所以我在cli4.x的项目中并没有出现此问题。

解决方案

方案一

如果只针对单个语法进行处理可以参考这篇文章-vue项目使用可选链操作符编译报错问题,其中@babel/plugin-proposal-optional-chaining中的optional-chaining指的就是链式判断运算符,其它的语法可以根据对应的英文名上npm找找。

方案二

个人觉得上面的方法虽然可行,但是治标不治本,所以我这边直接将@vue/cli-plugin-babel直接升级到更高的版本,目前使用来看没有啥问题,也能正常打包。后面有遇到坑的时候再做补充吧。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值