babel-upgrade babel 升级到 7.0 版本

1. babel-upgrade

官方的介绍是这样的

一个工具，可以更新大多数使用babel的依赖关系，配置文件，和JavaScript文件(将来可能会更多)。

字面意思是说 使用babel-upgrade 可以快速的把你的应用从 babel 6 更新到 babel 7

2. 用法

安装环境： nodejs >=8

如果 npm<5.2 使用 npm install npx -g 安装npx
使用 npx 可以让你使用 babel-upgrade 更新 babel 本地不需要下载任何东西

更新方式

# 更新命令
 1. npx babel-upgrade --write
# 或者使用全局安装 babel-upgrade 
 2. npm install babel-upgrade -g
# 更新命令
	babel-upgrade --write

安装完执行 npm install

3. 手动修改插件

1. 删除之前的 .babelrc文件，官方为了兼容，已经替换为.babelrc.json或者babel.config.json，我这里使用的是后者
2. 查看如下代码有哪里是缺少的，添加上去，有的升级之后是不给你默认安装的

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "modules": false
      }
    ]
  ],
  "plugins": [
    [
      "@babel/plugin-transform-runtime",
      {
        "corejs": 2
      }
    ],
    "@babel/plugin-syntax-dynamic-import",
    "@babel/plugin-syntax-import-meta",
    "@babel/plugin-proposal-class-properties",
    "@babel/plugin-proposal-json-strings",
    "@babel/plugin-transform-modules-commonjs",
    [
      "@babel/plugin-proposal-decorators",
      {
        "legacy": true
      }
    ],
    "@babel/plugin-proposal-function-sent",
    "@babel/plugin-proposal-export-namespace-from",
    "@babel/plugin-proposal-numeric-separator",
    "@babel/plugin-proposal-throw-expressions"
  ]
}

3. 如果出现如下报错，大概是引入方式不统一，是因为缺少插件 @babel/plugin-transform-modules-commonjs

TypeError: Cannot assign to read only property 'exports' of object '#<Object>'

执行命令

npm install --save-dev @babel/plugin-transform-modules-commonjs

之后重启项目，开发模式，生产模式都没问题了

注意，升级过程中一定要注意到生产模式和开发模式是否成功，因为有开发模式编译成功，但是生产模式不成功的情况会发生，笔者就因为生产模式不成功踌躇了好久。

4. 更新详情

这里可以当做了解，具体用法还需要查看官方文档 babel

1. NodeJs >= 8
2. npm/yarn 更新完依赖之后需要 执行 npm install
3. 更新 package.json: dependencies and devDependencies 下的字段到最新版
4. 更新 babel 相关相同的包到最新版
5. 在每个package.json 中开发依赖中添加 @babel/core

{
  "devDependencies": {
+   "@babel/core": "^7.0.0",
+   "@babel/plugin-proposal-object-rest-spread": "^7.0.0",
+   "@babel/preset-env": "^7.0.0",
+   "babel-loader": "v8.0.0-beta.0"
-   "babel-loader": "6.0.0",
-   "babel-plugin-transform-object-rest-spread": "6.0.0",
-   "babel-preset-env": "^1.0.0",
  },
}

6. mocha 启动方式更新成 @babel/register

{
  "name": "mocha-scripts-test",
  "scripts": {
-    "test": "mocha --compilers js:babel-register --require babel-polyfill test/*Test.js",
+    "test": "mocha --compilers js:@babel/register --require @babel/polyfill test/*Test.js",
  }
}

7. 如果有 jest or jest-cli 依赖的话，使用"babel-core": "^7.0.0-bridge-0"

"devDependencies": {
  "@babel/core": "^7.0.0",
+ "babel-core": "7.0.0-bridge.0",
  "jest": "^22.0.0"
},
"scripts": {
  "test": "jest"
}

8. 如果有 babel-node 运行方式的话，添加新的依赖 @babel/node

"devDependencies": {
  "@babel/cli": "^7.0.0",
+ "@babel/node": "^7.0.0"
},
"scripts": {
  "start": "babel-node a.js"
}

9. 解决所有的 .babelrc 文件

- src/
- example/
  - .babelrc // now modifies these too
- test/
  - .babelrc // now modifies these too
- `.babelrc`

10. 把配置文件的简写改成全称

{
  "presets": [
+   "@babel/preset-env"
-   "env"
  ]
}

11. package.json babel key

{
  "babel": {
    "presets": [
+     "@babel/preset-env"
-     "env"
    ]
  }
}

12. 解决所有 env

{
  "babel": {
    "presets": [
      "@babel/preset-env"
    ]
  },
  "env": {
    "development": {
      "plugins": [
-       "transform-react-jsx-source",
-       "babel-plugin-transform-react-jsx-self"
+       "@babel/plugin-transform-react-jsx-source",
+       "@babel/plugin-transform-react-jsx-self",
      ]
    }
  }
}

13. 修改 mocha.opts

-    --require babel-register
+   --require @babel/register

14. 更改数组中已逗号隔开的 presets/plugins

{
-  "presets": "env, react",
+  "presets": ["@babel/preset-env", "@babel/preset-react"],
}

15. 如果读取并添加了 .flowconfig , react 会加上 flow

{
  "@babel/preset-react": "^7.0.0",
+  "@babel/preset-flow": "^7.0.0"
}

16. presets Stage 将会被替换成个体插件

{
-  "presets": ["@babel/preset-stage-3"],
+  "presets": [],
+  "plugins": [
+    "@babel/plugin-syntax-dynamic-import",
+    "@babel/plugin-syntax-import-meta",
+    "@babel/plugin-proposal-class-properties",
+    "@babel/plugin-proposal-json-strings"
+  ]
}

{
-    "@babel/preset-stage-3": "^7.0.0"
+    "@babel/plugin-proposal-class-properties": "^7.0.0",
+    "@babel/plugin-proposal-json-strings": "^7.0.0",
+    "@babel/plugin-syntax-dynamic-import": "^7.0.0",
+    "@babel/plugin-syntax-import-meta": "^7.0.0"
}