babel6からbabel7へのアップグレードしたので雑にまとめる

いいがち、react15.6からreact16, mobx3->5, webpack3->4へのアップデートもした。
パッケージが落ち着いた時期にアップデートしたので、幾分か楽だった（気がする）

変更点

babelのアップデートに関しては、あまり困ったことにはならなかった。
半日もかかってない。気にするのは下記ぐらい。

• @babel に限らず、パッケージにprefixがつくものが出てきた

差分

雑に変更点を晒す

package.json

babel7にして、エラーが出なくなるまでパッケージちくちくアップデートした。結構骨が折れる。

• babel6から7にアップデート
• react15.6から16.6にアップデート
• mobx3.2から5.6にアップデート

diff --git a/package.json b/package.json
index 6c3e796..3143de6 100644
--- a/package.json
+++ b/package.json
@@ -7,19 +7,14 @@
-    "build": "NODE_ENV=production webpack -p",
+    "build": "NODE_ENV=production webpack --optimize-minimize --mode production",
     "deploy:local": "npm install; npm run build"
   },
@@ -46,61 +41,59 @@
   "bugs": {
     "url": ""
   },
-  "jest": {
-    "preset": "babel-preset-env"
+  "jest": {
+    "preset": "@babel/preset-env"
   },
   "license": "UNLICENSED",
   "homepage": "",
   "devDependencies": {
-    "babel-cli": "6.26.0",
-    "babel-core": "^6.26.0",
-    "babel-jest": "23.6.0",
-    "babel-eslint": "8.2.3",
-    "babel-loader": "^7.1.2",
-    "babel-plugin-transform-class-properties": "6.24.1",
-    "babel-plugin-transform-decorators-legacy": "1.3.5",
-    "babel-plugin-transform-object-assign": "6.22.0",
-    "babel-plugin-transform-object-rest-spread": "^6.26.0",
-    "babel-plugin-transform-runtime": "6.23.0",
-    "babel-polyfill": "^6.26.0",
-    "babel-preset-env": "1.6.1",
-    "babel-preset-react": "^6.24.1",
-    "babel-runtime": "^6.26.0",
-    "css-loader": "^0.28.7",
-    "eslint": "^4.6.1",
-    "eslint-config-airbnb": "^15.1.0",
-    "eslint-loader": "^1.8.0",
-    "eslint-plugin-import": "^2.6.1",
-    "eslint-plugin-jsx-a11y": "^6.0.2",
-    "eslint-plugin-react": "^7.5.1",
+    "@babel/cli": "^7.0.0",
+    "@babel/core": "^7.0.0",
+    "@babel/plugin-proposal-class-properties": "7.1.0",
+    "@babel/plugin-proposal-decorators": "^7.0.0",
+    "@babel/plugin-proposal-object-rest-spread": "^7.0.0",
+    "@babel/plugin-transform-object-assign": "^7.0.0",
+    "@babel/plugin-transform-runtime": "^7.0.0",
+    "@babel/polyfill": "^7.0.0",
+    "@babel/preset-env": "^7.0.0",
+    "@babel/preset-react": "^7.0.0",
+    "@babel/register": "^7.0.0",
+    "@babel/runtime": "^7.0.0",
+    "babel-core": "7.0.0-bridge.0",
+    "babel-eslint": "10.0.1",
+    "babel-jest": "^23.6.0",
+    "babel-loader": "8.0.4",
+    "css-loader": "1.0.1",
+    "eslint": "5.8.0",
+    "eslint-config-airbnb": "17.1.0",
+    "eslint-loader": "2.1.1",
+    "eslint-plugin-import": "^2.14.0",
+    "eslint-plugin-jsx-a11y": "6.1.2",
+    "eslint-plugin-react": "^7.11.0",
+    "file-loader": "2.0.0",
+    "html-webpack-plugin": "3.2.0",
     "jest": "23.6.0",
-    "file-loader": "^0.11.2",
-    "html-webpack-plugin": "^2.30.1",
-    "json-loader": "^0.5.7",
-    "react-addons-test-utils": "^15.6.0",
-    "react-hot-loader": "3.0.0-beta.6",
-    "react-test-renderer": "^15.6.1",
-    "url-loader": "^0.5.9",
-    "webpack": "^3.5.5",
-    "webpack-dev-server": "^2.7.1",
-    "webpack-manifest-plugin": "^1.3.1",
+    "json-loader": "0.5.7",
+    "react-hot-loader": "^4.3.0",
+    "react-test-renderer": "^16.6.0",
+    "url-loader": "1.1.2",
+    "webpack": "^4.25.0",
+    "webpack-cli": "^3.1.0",
+    "webpack-dev-server": "^3.1.0",
@@ -111,31 +104,30 @@
-    "mobx": "^3.2.2",
-    "mobx-react": "^4.2.2",
-    "mobx-react-devtools": "^4.2.15",
+    "mobx": "^5.6.0",
+    "mobx-react": "^5.3.0",
+    "mobx-react-devtools": "^6.0.0",
-    "react": "^15.6.1",
-    "react-addons-pure-render-mixin": "^15.6.0",
+    "react": "^16.6.0",
+    "react-addons-pure-render-mixin": "15.6.2",
-    "react-dom": "^15.6.1",
+    "react-dom": "^16.6.0",
-    "react-router-dom": "^4.2.2",
+    "react-router-dom": "^4.3.0",
-    "react-tap-event-plugin": "2.0.1",

.babelrc

babelに関するプラグインの名前変わったので、適宜置き換えた。
対応するプラグイン探すのが地味にめんどくさい。

diff --git a/.babelrc b/.babelrc
index 35c4727..ffa7bc8 100644
--- a/.babelrc
+++ b/.babelrc
@@ -1,32 +1,33 @@
 {
   "presets": [
     [
-      "env",
+      "@babel/preset-env",
     ],
-    "react",
+    "@babel/preset-react"
-  ],
   "ignore": ["node_modules"],
   "plugins": [
-    "transform-decorators-legacy",
-    "transform-class-properties",
-    "transform-object-rest-spread",
-    "transform-object-assign",
-    "transform-runtime",
-    "react-hot-loader/babel"
+    [
+      "@babel/plugin-proposal-decorators",
+      {
+        "legacy": true
+      }
+    ],
+    [
+      "@babel/plugin-proposal-class-properties",
+      {
+        "loose": true
+      }
+    ],
+    "@babel/plugin-transform-object-assign",
+    "@babel/plugin-proposal-object-rest-spread",
+    "@babel/plugin-transform-runtime"
   ]
 }

webpack.config.js

とりあえず要所だけ

• mode指定で development or production どちらかを渡せって怒られるので、設定いれる
• optimization.splitChunk 設定すると、パッケージのjsとビルドしたjs分けてくれるみたい。ビルドが早くなった気がする

diff --git a/webpack.config.dev.babel.js b/webpack.config.dev.babel.js
index 3023936..d263818 100644
--- a/webpack.config.dev.babel.js
+++ b/webpack.config.dev.babel.js
@@ -1,9 +1,9 @@
 import webpack from 'webpack';

 module.exports = {
+  mode: 'development',
   cache: true,
   devtool: 'eval',
   entry: {

diff --git a/webpack.config.prod.babel.js b/webpack.config.prod.babel.js
index f06e96a..9828d45 100644
--- a/webpack.config.prod.babel.js
+++ b/webpack.config.prod.babel.js
@@ -3,6 +3,7 @@ import webpack from 'webpack';
 const NODE_ENV = process.env.NODE_ENV || 'production';
-
 module.exports = {
+  mode: 'production',
   devtool: false,
   output: {
     path: `${__dirname}/public`,
@@ -10,6 +11,12 @@ module.exports = {
     filename: '[name].[hash].js',
     chunkFilename: '[name].[hash].js',
   },
+  optimization: {
+    splitChunks: {
+      name: 'vendor',
+      chunks: 'initial',
+    },
+  },

.eslintrc

• 過剰な分割代入要求されたので黙らした
• legacyDecorators 通すために設定入れたけど、いつかやめるべきかもしれぬ
• 賢くなってるので、 eslint --fix したら幾分か差分が出るはず頑張って直そう

diff --git a/.eslintrc b/.eslintrc
index 7472ba4..73a2b48 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -9,6 +9,7 @@
   "parser": "babel-eslint",
   "plugins": ["react", "jsx-a11y", "import"],
   "rules": {
+    "react/destructuring-assignment": [0, "never"],
     "linebreak-style": ["error", "unix"],
     "global-require": 0,
     "max-len": 0,
@@ -29,5 +30,10 @@
       }
     ],
     "react/prop-types": 0
+  },
+  "parserOptions": {
+    "ecmaFeatures": {
+      "legacyDecorators": true
+    }
   }
 }