最近迁移代码遇到了一个问题,报错如下:
看到一个??的连接符,赶紧去网上搜了一下,类似于??和?.和..的统称为可选链,具体解释请前往【可选链运算符(?.) - JavaScript | MDN】
描述:
我接触的项目是使用vue2编写的,vue2并不支持ES2020,它是基于ES2015(也就是ES6)标准构建的,所以会出现不识别可选链的类似报错问题,但是,开发者可以使用Babel等工具将ES2020代码转换为ES2015代码,然后就可以在vue2项目中使用了。具体解决方法如下:
1)安装Babel相关的依赖:
npm install babel-core babel-loader babel-preset-env --save-dev
2)在webpack配置文件中添加Babel相关的配置:
//vue.config.js configureWebpack: { module: { rules: [ { test: /\.m?js$/, exclude: /(node_modules|bower_components)/, use: { loader: 'babel-loader', options: { plugins: [ '@babel/plugin-proposal-nullish-coalescing-operator', '@babel/plugin-proposal-optional-chaining' ] } } } ] } }
//babel.config.js module.exports = { presets: [ '@vue/app' ], plugins: [ [ "component", { "libraryName": "element-ui", "styleLibraryName": "theme-chalk" } ], '@babel/plugin-proposal-optional-chaining'//在此处配置 ] }
我是使用这种配置的方式解决的,还有其他方法:例如升级vue2到vue3版本等。。
前端小白积累经验篇~~