Webpack + Babel + ES2015 + Reactの開発環境構築

# はじめに
Reactの開発環境を整える。
[公式ツールを使用して簡単に構築することもできる](http://qiita.com/cacarrot/items/8c653128d18883a208be)けど、
ここでは自前で構築する場合の手順を。

# インストール
## Node.js
Node.jsをNodebrew経由でインストール。

```bash:以下のコマンドを実行
# Nodebrewをインストール
brew install nodebrew
mkdir -p ~/.nodebrew/src

# 利用可能なバージョン番号確認する場合は
# nodebrew ls-remote
# を実行

# Node.jsインストール
nodebrew install-binary v6.4.0
nodebrew use v6.4.0
```

## Webpack
Webpackはグローバルにインストール。

```bash:以下のコマンドを実行
npm install -g webpack
npm install -g webpack-dev-server
npm install -g webpack-init
```

## Atom
- <https://atom.io/>からダウンロードしてインストール。
- 以下のパッケージを入れておく。
    - [language-babel](https://atom.io/packages/language-babe)
    - [linter-eslint](https://atom.io/packages/linter-eslint)

# プロジェクト毎のセットアップ

## npm install

プロジェクトのワークスペースで以下のコマンドを実行。

```bash
npm init -y
npm install --save react react-dom redux react-redux
npm install --save-dev babel-loader babel-core babel-preset-react babel-preset-es2015
npm install --save-dev eslint@3.x babel-eslint@6
npm install --save-dev file-loader
npm install --save-dev glob-loader
```

こんな感じのpackage.jsonが出来上がる。

```json:package.json
{
  "name": "sample",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "react": "^15.3.1",
    "react-dom": "^15.3.1",
    "react-redux": "^4.4.5",
    "redux": "^3.5.2"
  },
  "devDependencies": {
    "babel-core": "^6.14.0",
    "babel-eslint": "^6.1.2",
    "babel-loader": "^6.2.5",
    "babel-preset-es2015": "^6.14.0",
    "babel-preset-react": "^6.11.1",
    "eslint": "^3.4.0",
    "file-loader": "^0.9.0",
    "glob-loader": "^0.2.0"
  }
}
```

生成されたpackage.jsonのscriptsキーに追記。

```json:抜粋
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --progress --colors --watch",
    "start": "webpack-dev-server"
  },
```

## webpack.config.js

ファイルを新規作成。

```bash
webpack-init
```

[Webpackの公式ドキュメント](https://webpack.github.io/docs/configuration.html)を参考にして編集。以下は例。

```js:webpack.config.js
module.exports = {
  context: __dirname + "/src/www",

  entry: {
    jsx: "./jsx/app.jsx",
    css: "./css/style.css",
  },

  output: {
    path: __dirname + "/src/main/resources/static",
    filename: "./js/bundle.js",
  },

  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        loaders: ["babel-loader"],
      },
      {
        test: /\.css$/,
        loader: "file?name=[name].[ext]",
      },
    ]
  },

  devServer: {
    port: 18080,
    inline: true,
    contentBase: __dirname + "/src/main/resources/static",
  }

};
```

## .babelrc

ファイルを新規作成。

```bash
touch .babelrc
```

以下のように編集。

```json:.babelrc
{
  "presets": ["es2015", "react"]
}
```

## .eslintrc作成

ファイルを新規作成。

```bash
touch .eslintrc
```

以下のように編集。

```json:.eslintrc
{
  "parser": "babel-eslint",
  "env": {
        "es6": true,
        "node": true,
        "browser": true
  },
  "rules": {
   "semi": [2, "always"],
   "strict": 1,
   "no-undef" : 2
  }
}
```

# 参考
- http://kenokabe-techwriting.blogspot.jp/2015/08/javascriptes6react-jsxes5-atom-3-32015.html
- http://qiita.com/59naga/items/add00e8df306d7b8d05b
- http://blog.namiking.net/post/2015/09/test-webpack-browser/
- http://uraway.hatenablog.com/entry/2015/12/25/Webpack_%2B_React_%2B_ES6%E3%81%AE%E6%9C%80%E5%B0%8F%E6%A7%8B%E6%88%90%E3%82%92%E8%80%83%E3%81%88%E3%81%A6%E3%81%BF%E3%82%8B%E3%80%82