升級Babel@6 到 7

(一) 前言

新開了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 }],

6. 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