战纪无双网游活动聚合网

升级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' 以上,希望大家少踩坑