升级你的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也是很合理的对不对(不

posted @ 2020-09-18 21:57  Molyp  阅读(1031)  评论(0编辑  收藏  举报