babel报错处理【升级方案】

(一) 前言

新开了pc项目, 安装babel最新已经到7，既然如此，就把老项目和新项目统一换到babel@7

(二) 升级

使用官方命令直接升级

# 不安装到本地而是直接运行命令，npm 的新功能
npx babel-upgrade --write

# 或者常规方式
npm i babel-upgrade -g
babel-upgrade --write

基本就是将babel- 替换成@babel/
比如如下图

(三) 升级中遇到的问题

1. 修改babel-polyfill
   

2. 已经删除了babel-preset-stage-2
   官方链接

3. 老项目使用6，想在babel内部增加环境，所以采用了js方案，
   
   7后面只能有1个（.babelrc / .babelrc.js）存在。而且官方升级时候，自动替换，目前不支持js修改，所以，建议是将js写回.babelrc，等待升级完成，可以将.babelrc删除，然后直接使用.babelrc.js。

4. @babel/plugin-proposal-class-properties 报错如下
   
   解决方案：
   在plugins修改配置

["@babel/plugin-proposal-class-properties", { loose: true }],

1. eslint报错：Cannot read property ‘range’ of null
   官方默认是

"babel-eslint": "^9.0.0",

就会报如下错误

这里解决方案如下

* 使用babel-eslint: ^10.0.1

* 使用babel-eslint: 8.2.6

目前我使用是采用第二张, 使用8.2.6版本的babel-eslint