升级你的babel,来支持可选链等语法
升级你的babel
npx babel-upgrade --write
# 或是安裝 babel-upgrade 在 global 并执行
npm install babel-upgrade -g
babel-upgrade --write
执行之后需要注意的
很多包的格式都发生了变化,部分的包甚至从plugins变到了presets(说的就是你 jsx插件),在babel7之后,plugins的格式大多变成了@babel开头的名字,此时你run代码会出现一些报错,请google解决
从babel6升级 请注意配置文件
这里面其实还是有一些问题,如果你的老项目中存在.babelrc文件,你需要手动的将文件内的配置迁移到.babel.config.js
参考内容如下
升级前: .babelrc
{
"presets": [
[
"@babel/preset-env",
{
"modules": "commonjs",
"targets": {
"browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
}
},
"@vue/babel-preset-jsx"
]
],
"plugins": [
"@babel/plugin-transform-runtime",
"@babel/plugin-proposal-object-rest-spread",
[
"component",
{
"libraryName": "element-ui",
"styleLibraryName": "theme-chalk"
}
]
]
}
升级后:.babel.config.js
module.exports = {
presets: [
[
'@babel/preset-env',
{
modules: 'commonjs',
targets: {
browsers: ['> 1%', 'last 2 versions', 'not ie <= 8']
}
},
'@vue/babel-preset-jsx'
]
],
plugins: [
'@babel/plugin-transform-runtime',
'@babel/plugin-proposal-object-rest-spread',
/** 管道操作符 */
['@babel/plugin-proposal-pipeline-operator', { proposal: 'smart' }],
[
'component',
{
libraryName: 'element-ui',
styleLibraryName: 'theme-chalk'
}
]
]
}
既然变成了js那么变成一个module也是很合理的对不对(不