script和template里可选链运算符?.报错Syntax Error: Unexpected token (64:2)
前情:babel-core@6.2.3, vue@2.7.14
试过的方法:1、安装@babel/plugin-proposal-optional-chaining,设置.babelrc文件如下,报babel-core版本需7.0.0-0的错。
2、将babel-core单独升到7.0.0-bridge.0(npm i babel-core@7.0.0-bridge.0),报错Module build failed: Error: Plugin/Preset files are not allowed to export objects, only functions。
3、将babel整体升级到7:使用npx babel-upgrade --write (先删除node_moubel和package-lock,不然升级不完整)。
升级成功后,还是会一开始的报错,这时需要.babelrc文件中,添加如下设置,这样可正确解析扩展运算符和可选链运算符。
"presets": [
"@babel/preset-env"
],
如下:
package.json变化:
以上的方法可以解决在script区域可选链式运算符报错的问题,template的不能解决。
研究发现是可选链式运算符是2020年新出的语法,vue2的template编译器vue-template-compiler还不支持这一功能,vue3应该支持了。但我发现使用vue2的脚手架的项目,template可编译成功。其项目配置如下:
也可用短路运算: obj && obj.aa
断断续续用时一天多才解决script的报错问题,因为不信邪走了三次重复的错。事实证明路走不通时,不要怀疑自己走错了,再重走。而是不撞南墙不回头,遇到墙要去不同角度的撞(提取关键词,换各种组合搜索)!