Redux単体で動作する環境を作る

Reduxのソースを読むために、まずはReduxだけを動かす環境を作ります。
Reduxのgithubには、The Gistとして、Redux単体で動かすサンプルコードが載っています。このサンプルコードを動かすまでを目標とします。

基本的にはNode.jsのプロジェクトを作成して、そこにreduxをインストールします。ただ、The GistがES6のimportの書き方をしているので、これを解釈できるようにbabel-cliとbabel-preset-envも一緒に入れて、babel-nodeで起動できるようにします。

まずは、空のディレクトリを作成して、redux babel-cli babel-preset-env をインストールします。

$ mkdir redux-simple2 
$ cd redux-simple2
$ echo "{}" > package.json
$ npm install redux babel-cli babel-preset-env --save

次に、package.jsonにscript/startを追加します。

package.json

{
  "dependencies": {
    "babel-cli": "^6.26.0",
    "babel-preset-env": "^1.7.0",
    "redux": "^4.0.1"
  },
  "scripts": {  // 以下3行を追加
    "start": "babel-node --presets babel-preset-env index.js" 
  }
}

最後に、index.jsにThe Gistをコピペします。
この状態で npm start すると、babel-nodeがES6なindex.jsを解釈して起動します。

$ npm start

> @ start /Users/tak/proj/redux-simple2
> babel-node --presets babel-preset-env index.js

1
2
1

Ultimate版のIntelliJは、JavaScriptのデバッグ実行が可能です。babel-nodeの引数に$NODE_DEBUG_OPTION を追加する事で、IntelliJでのデバッグ実行ができるようになります。

package.json

"start": "babel-node $NODE_DEBUG_OPTION --presets babel-preset-env index.js"