Edited at

React Tutorial Example (Package)

More than 1 year has passed since last update.

React や Redux の パッケージ はバージョンが更新されることがあります。

パッケージの管理には npmyarn などの管理ツールを利用します。

前回 のアプリケーションの パッケージ を変更してみましょう。


Learning



  • npm-check-updatespackage.json を更新する。


  • yarnwebpack を更新する。


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"


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!


パッケージは機能追加や高速化、セキュリティなどの理由でバージョンが上がります。

頻繁にあるバージョンアップのたびにアプリケーションのテストをするのは大変ですね。

次回は テスト を自動化しましょう!