升级babel7的过程及遇到的一些坑

升级bable7的过程及遇到的一些坑

起源:

在项目中发现无法使用可选链的语法,导致代码中存在对于属性的判断代码

如果使用可选链的话,项目会直接报错,原因是babel版本太低,不支持es10的写法

升级babel

为了让项目能够减少这种写法,支持最新的es写法,只能升级babel的版本了

升级步骤

按照官网的来,其实不难
babel官方升级babel7的中文文档

• 输入命令行npx babel-upgrade --write会自动升级到babel7的版本

• 这个命令会帮你把package.json中的babel版本升级,及改变.babelrc的一些内容

• 
  

• babel可能会增加一些没必要的包或者plugins,自己可以手动删除

• rimraf node_modules删除依赖,再重新下载依赖

• 对于入口文件也要做一些相应的改变
  

• 尝试npm run dev,项目跑起来没报错

• 尝试使用可选链语法,项目没报错,可以使用(至此,达到目的)

坑点

升级之后可能有些方法会报错,比如flatten方法
原因是:babel7会移除在 @babel/polyfill 里的 polyfills 提案
包括但不限于以下几种方法

这样会导致如果老项目中使用这些方法可能会报错 (比如flatten,后面方法名变成了flat)

解决方案

1.手动去改写方法,比如将项目中所有的flatten方法改成flat(简单但不全面,可能还会有其他问题)
2.直接引入之前的polyfills 提案中的方法(更加安全,一步到位,推荐)
操作
在入口文件,main.js中直接引入core-js
import 'core-js'

以上,希望大家少踩坑