React Tutorial Example (Package)

React や Redux の パッケージ はバージョンが更新されることがあります。
パッケージの管理には npm や yarn などの管理ツールを利用します。
前回 のアプリケーションの パッケージ を変更してみましょう。

Learning

• npm-check-updates で package.json を更新する。
• yarn で webpack を更新する。

Environment

• node: v6.9.1
• npm: v4.0.3
• yarn: v0.17.9

Comment Box Form

• 完成される Source Code のファイルリストです。

$ tree -a -I node_modules
.
├── .babelrc
├── app
│   ├── actions
│   │   └── index.js
│   ├── components
│   │   ├── Comment
│   │   │   └── index.js
│   │   ├── CommentBox
│   │   │   ├── index.js
│   │   │   └── style.css
│   │   ├── CommentForm
│   │   │   └── index.js
│   │   ├── CommentList
│   │   │   └── index.js
│   │   └── global.css
│   ├── containers
│   │   └── App
│   │       ├── index.js
│   │       └── style.css
│   ├── index.js
│   ├── reducers
│   │   └── index.js
│   └── store
│       └── index.js
├── index.html
├── package.json
├── webpack.config.js
└── yarn.lock

Let's hands-on

Setup application

• git clone コマンドでアプリケーションをダウンロードします。
• npm install コマンドで依存するモジュールをインストールします。

$ git clone https://github.com/ogom/react-comment-box-example.git
$ cd react-comment-box-example
$ git checkout postcss
$ npm install

Start HTTP Server

• npm start コマンドで Webアプリケーション を実行します。
• ブラウザで http://localhost:4000 をロードすると Comment Box Example が表示されます。

$ npm start
$ open http://localhost:4000

(API Server は React Tutorial Example (Express) をご利用ください。)

npm check updates

• パッケージの更新の確認は npm-check-updates を利用します。

$ npm install -g npm-check-updates

ncu

• ncu コマンドで package.json から更新の対象が解ります。

$ ncu
 css-loader      ^0.23.1  →  ^0.26.0
 jquery           ^2.2.4  →   ^3.1.1
 postcss-loader   ^0.9.1  →   ^1.1.1
 redux-actions   ^0.10.0  →   ^1.1.0

ncu upgrade

• ncu -u コマンドで package.json を更新します。

$ ncu -u
 css-loader      ^0.23.1  →  ^0.26.0
 jquery           ^2.2.4  →   ^3.1.1
 postcss-loader   ^0.9.1  →   ^1.1.1
 redux-actions   ^0.10.0  →   ^1.1.0

package.json

-    "css-loader": "^0.23.1",
+    "css-loader": "^0.26.0",
-    "jquery": "^2.2.4",
+    "jquery": "^3.1.1",
-    "postcss-loader": "^0.9.1",
+    "postcss-loader": "^1.1.1",
-    "redux-actions": "^0.10.0",
+    "redux-actions": "^1.1.0",

ncu upgrade (all)

• ncu -a コマンドは更新の対象以外の パッケージ も更新します。

$ ncu -a
 css-loader      ^0.23.1  →  ^0.26.0
 jquery           ^2.2.4  →   ^3.1.1
 postcss-loader   ^0.9.1  →   ^1.1.1
 redux-actions   ^0.10.0  →   ^1.1.0

package.json

   "devDependencies": {
-    "autoprefixer": "^6.3.6",
+    "autoprefixer": "^6.5.3",
-    "babel-core": "^6.9.1",
+    "babel-core": "^6.18.2",
-    "babel-loader": "^6.2.4",
+    "babel-loader": "^6.2.8",
-    "babel-preset-es2015": "^6.9.0",
+    "babel-preset-es2015": "^6.18.0",
-    "babel-preset-react": "^6.5.0",
+    "babel-preset-react": "^6.16.0",
-    "css-loader": "^0.23.1",
+    "css-loader": "^0.26.0",
-    "jquery": "^2.2.4",
+    "jquery": "^3.1.1",
-    "postcss-import": "^8.1.2",
+    "postcss-import": "^8.2.0",
-    "postcss-loader": "^0.9.1",
+    "postcss-loader": "^1.1.1",
     "precss": "^1.4.0",
-    "react": "^15.1.0",
+    "react": "^15.4.1",
-    "react-dom": "^15.1.0",
+    "react-dom": "^15.4.1",
-    "react-hot-loader": "^1.3.0",
+    "react-hot-loader": "^1.3.1",
-    "react-redux": "^4.4.5",
+    "react-redux": "^4.4.6",
-    "redux": "^3.5.2",
+    "redux": "^3.6.0",
-    "redux-actions": "^0.10.0",
+    "redux-actions": "^1.1.0",
-    "remarkable": "^1.6.2",
+    "remarkable": "^1.7.1",
     "style-loader": "^0.13.1",
-    "webpack": "^1.13.1",
+    "webpack": "^1.13.3",
-    "webpack-dev-server": "^1.14.1"
+    "webpack-dev-server": "^1.16.2"
   }
 }

ncu newest

• ncu -n コマンドで latest stable version が解ります。

$ ncu -n
 react-redux          ^4.4.6  →     ^5.0.0-rc.1
 webpack             ^1.13.3  →  ^2.1.0-beta.27
 webpack-dev-server  ^1.16.2  →  ^2.1.0-beta.12

yarn

• npm より爆速な yarn を利用します。
  • node yarn なので nyarn(にゃーん♪) と読むとかわいい！

$ npm install -g yarn

yarn install

• yarn コマンドでパッケージがインストールされます。
  • yarn.lock ファイルが作成されます。

$ yarn

yarn upgrade

• yarn upgrade コマンドでパッケージの更新をインストールします。
  • yarn upgrade-interactive コマンドはパッケージの更新を対話式でインストールできます。

react-redux (rc)

• バーションを指定するには yarn upgrade [package]@[version] コマンドを利用します。
  • react-redux 5系から速度が改善されたので使いたい！

$ yarn upgrade react-redux@5.0.0-rc.1

package.json

-    "react-redux": "^4.4.6",
+    "react-redux": "5.0.0-rc.1",

webpack (beta)

• タグを指定するには yarn upgrade [package]@[tag] コマンドを利用します。
  • webpack 2系から速度が改善されたので使いたい！
• PostCSS のライブラリが依存するようになったので削除します。
  • 依存が yarn.lock で確認できるので便利です。

$ yarn remove autoprefixer postcss-import precss
$ yarn upgrade webpack@beta webpack-dev-server@beta

package.json

-    "webpack": "^1.13.1",
+    "webpack": "beta",
-    "webpack-dev-server": "^1.14.1"
+    "webpack-dev-server": "beta"

• Migrating from v1 to v2 を参照しながら必要な箇所を修正します。
  • react-hot-loader を3系にするには Hot Module Replacement を参照しましょう。

webpack.config.js

 var webpack = require('webpack')
-var postcssImport = require('postcss-import')
-var autoprefixer = require('autoprefixer')
-var precss = require('precss')

 module.exports = {
   entry: './app/index',
@@ -17,33 +14,21 @@ module.exports = {
         test: /\.js$/,
         exclude: /node_modules/,
         loaders: [
-          'react-hot',
-          'babel'
+          'react-hot-loader',
+          'babel-loader'
         ]
       },
       {
         test: /\.css$/,
         include: /app/,
         loaders: [
-          'style',
-          'css?modules',
-          'postcss'
+          'style-loader',
+          'css-loader?modules',
+          'postcss-loader'
         ]
       }
     ]
   },
-  postcss(webpack) {
-    return [
-      postcssImport({
-          addDependencyTo: webpack
-      }),
-      autoprefixer,
-      precss
-    ]
-  },
-  resolve: {
-    extensions: ['', '.js', '.css']
-  },
   devServer: {
     hot: true,
     port: 4000,

これで アプリケーション の動作が速くなるので開発が捗ります。

Congrats!

---

パッケージは機能追加や高速化、セキュリティなどの理由でバージョンが上がります。
頻繁にあるバージョンアップのたびにアプリケーションのテストをするのは大変ですね。
次回は テスト を自動化しましょう！