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指定で
developmentorproductionどちらかを渡せって怒られるので、設定いれる -
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
+ }
}
}
Author And Source
この問題について(babel6からbabel7へのアップグレードしたので雑にまとめる), 我々は、より多くの情報をここで見つけました https://qiita.com/Jey/items/12bc781242bc6fa40570著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .