1年ぶりに己のウェブサイトを更新しようとして、もろもろアップデートしました。

kimizuka.fm

GWをつかってひさしぶりに更新しようとしました。
が。もろもろ環境が古くなっていたので、軽い気持ちで更新の前に環境を更新しておくかと思い手を付けたところ案外大変だったので、色々メモを残しておきます。

Node.js

7.9.0 👉 10.0.0

先日、Node.jsの10.0がリリースされたことは何かのニュースで目にしてました。
せっかくなので、アップデートしておきましょう。
nodebrewを入れていたので、

nodebrew install-binary v10.0.0
nodebrew use v10.0.0
npm update -g npm

でOKです。

webpack

2.3.3 👉 4.6.0

しばらく見ぬ間にバージョンが大きく変わってました。
単純にアップデートするだけでは動かず、webpack.config.babel.jsを、

import webpack from "webpack";
import ExtractTextPlugin from "extract-text-webpack-plugin";

module.exports = [{
  entry: {
    top : __dirname + "/_src/js/top/index.js"
  },
  output: {
    path: __dirname + "/public/js/",
    filename: "[name].bundle.js"
  },
  module: {
    rules: [{
      test: /\.js[x]?$/,
      exclude: [
        /node_modules/
      ],
      use: [{
        loader: "babel-loader",
        options: {
          presets: [
            "react",
            "es2015",
            "es2017"
          ]
        }
      }]
    }]
  },
  resolve: {
    extensions: [".js", ".jsx"]
  },
  plugins: [
    new webpack.optimize.UglifyJsPlugin(),
    new webpack.DefinePlugin({
      "process.env.NODE_ENV": "'production'",
      DEVELOPMENT: false,
      DEBUG: false,
    })
  ]
},{
  entry: {
    top: __dirname + "/_src/css/top/index.css"
  },
  output: {
    path: __dirname + "/public/css/",
    filename: "[name].bundle.css"
  },
  module: {
    rules: [{
      test: /\.css$/,
      use: ExtractTextPlugin.extract({
        loader: [
          "css-loader",
          "postcss-loader"
        ]
      })
    }]
  },
  plugins: [
    new ExtractTextPlugin("[name].bundle.css")
  ]
}];

から、

import webpack from "webpack";
import ExtractTextPlugin from "extract-text-webpack-plugin";

module.exports = [{
  mode: "production",
  target: "node",
  entry: {
    top : __dirname + "/_src/js/top/index.js"
  },
  output: {
    path: __dirname + "/public/js/",
    filename: "[name].bundle.js"
  },
  module: {
    rules: [{
      test: /\.js[x]?$/,
      exclude: [
        /node_modules/
      ],
      use: [{
        loader: "babel-loader",
        options: {
          presets: ["env", "react"] // es2015, es2017をenvに変更
        }
      }]
    }]
  },
  resolve: {
    extensions: [".js", ".jsx"]
  },
  plugins: [ // new webpack.optimize.UglifyJsPlugin()を削除
    new webpack.DefinePlugin({
      "process.env.NODE_ENV": "'production'",
      DEVELOPMENT: false,
      DEBUG: false,
    })
  ]
},{
  entry: {
    top: __dirname + "/_src/css/top/index.css"
  },
  output: {
    path: __dirname + "/public/css/",
    filename: "[name].bundle.css"
  },
  module: {
    rules: [{
      test: /\.css$/,
      use: ExtractTextPlugin.extract({
        use: [{ // loaderの記述を変更
          loader: "css-loader",
          options: {
            minimize: false
          }
        },{
          loader: "postcss-loader"
        }]
      })
    }]
  },
  plugins: [
    new ExtractTextPlugin("[name].bundle.css")
  ]
}];

へと書き換えました。
差分はコメントのとおりです。
ちょっとwebpackが嫌いになりました。

babel

"babel-core": "^6.24.1"
"babel-loader": "^6.4.1"
"babel-preset-es2015": "^6.24.1"
"babel-preset-es2017": "^6.24.1"

👇

"babel-core": "^6.26.3"
"babel-loader": "^7.1.4"
"babel-preset-env": "^1.6.1"

webpackのところでも触れましたが、
babel-preset-es2015、babel-preset-es2017がbabel-preset-envになりました。
これはwebpack.config.babel.jsを書き換えるだけで動きました。

express

4.15.2 👉 4.16.3

大きな変更は感じませんでした。

React

"react": "^15.5.4"
"react-dom": "^15.5.4"
"react-redux": "^5.0.4"
"redux": "^3.6.0"
"redux-devtools": "^3.3.2"
"redux-logger": "^3.0.1"

👇

"react": "^16.3.2"
"react-dom": "^16.3.2"
"react-redux": "^5.0.7"
"redux": "^4.0.0"
"redux-devtools": "^3.4.1"
"redux-logger": "^3.0.6"

Reactが16になりました。
サーバサイドレンダリングが便利になったとかなってないとかという記事を見た気がしますが、特に違いを感じることはありませんでした。

PostCSS

"postcss-calc": "^5.3.1"
"postcss-import": "^9.1.0"
"postcss-loader": "^1.3.3"
"postcss-nested": "^1.0.0"
"postcss-simple-vars": "^3.1.0"

👇

"postcss-calc": "^6.0.1"
"postcss-import": "^11.1.0"
"postcss-loader": "^2.1.4"
"postcss-nested": "^3.0.0"
"postcss-simple-vars": "^4.1.0"

概ね問題なかったのですが、postcss-calcの挙動が若干変わりました。

width: calc(100 + 100px);

みたいな感じで書いていたところを、

width: calc(100px + 100px);

と書き直しました。
多分、そもそも僕の書き方が良くなかったんだと思います。

pm2

2.4.4 👉 2.10.3

ローカルの環境では問題なかったのですが、サーバ側では、

Error: Cannot find module 'chalk'

と表示されるようになったので、

yarn add chalk

とchalkを導入しました。
アップデートが原因かどうかはわかりません。

===

以上、環境をアップデートするまでに結構時間を食ってしまいました。
ウェブの進化は目をみはるものがありますね。＾ ＾