2016年から始めるフロントサイド~環境構築編~

Boilerplate一覧

https://github.com/mxstbr/react-boilerplate
https://github.com/chentsulin/electron-react-boilerplate
https://github.com/gaearon/react-hot-boilerplate
https://github.com/koichirola/react-boilerplate (私のなので上より参考にならない可能性あり)

環境構築

1. editor
2. nodejs
3. npm

• babel
• eslint
• webpack
• react,redux

editor

• visual studio codeを使います。
• keybindingsとsettingsを少し変更します。
• sublime textの方がいいのでしょうか？良いのであれば購入を検討します！

keybindings.json

[
    { "key": "shift+ctrl+k",               "command":
    "workbench.action.editor.changeLanguageMode" },
    { "key": "shift+ctrl+o",               "command":
    "workbench.action.showCommands" },
    { "key": "ctrl+j",                     "command":
    "deleteAllLeft"},
    { "key": "ctrl+i",                     "command":
    "expandLineSelection", "when": "editorTextFocus" }
]

settings.json

{
    //-------- Editor configuration --------

    "editor.fontSize": 14,
    "editor.fontFamily": "monospace",
    "editor.renderWhitespace": true,
    "editor.glyphMargin": true,
    "editor.cursorStyle": "block",
    "editor.cursorBlinking": "visible",
    "editor.tabSize": 2,
    "editor.wrappingColumn": 80,

    //-------- Files configuration --------
    "files.autoSave": "afterDelay"
}

• 上のkeybindingだとshift+ctrl+oでコマンドパレットを表示します。
• Install Extensionを入力します。
• Javascriptを入力して検索します。
• 好きな拡張をインストールします。
• shift+ctrl+oでコマンドパレットを表示します。
• commandを入力します。
• Shell Commandでcodeでshellから起動できるようにします。

nodejs

• nodebrewを使ってインストールします。

nodebrew

# ~/.bash_profileにPATHを追加するような表示が出るのでその通りにする
$ brew install nodebrew

# インストール出来るバージョンの表示
$ nodebrew ls-remote

$ nodebrew install-binary v5.7.0
$ nodebrew use v5.7.0
$ node -v
v5.7.0
$ npm -v
3.6.0

npm

• 開発用のプロジェクトを作成します。
• 必要なコマンドラインをインストールします。
• 公式サイト

# プロジェクト作成
$ cd /path/to/project

# プロンプトにしたがって色々入力
$ npm init

# 必要なコマンドラインをインストール
# npm runを使う場合は特に必要なさそうです(2016/3/8 追記)
$ npm install -g webpack browserify babel-cli mocha eslint cross-env

babel

• npmを使ってインストールします。
• babelはプラグインの種類が多いので、お気に入りのプロジェクトを真似するか。適当に良さそうなものを入れていきます。
• とりあえずパッケージ化は考えないのでdevDependenciesに放り込みます。
• 公式サイト

babel

$ npm install --save-dev babel-cli babel-core babel-eslint babel-loader \
babel-plugin-transform-es2015-literals babel-plugin-transform-es2015-modules-commonjs \
babel-plugin-transform-es2015-object-super babel-plugin-transform-es2015-parameters \
babel-plugin-transform-es2015-shorthand-properties babel-plugin-transform-es2015-spread \
babel-plugin-transform-es2015-template-literals babel-plugin-transform-es2015-for-of \
babel-plugin-transform-es2015-destructuring babel-plugin-transform-es2015-computed-properties \
babel-plugin-transform-es2015-classes babel-plugin-transform-es2015-block-scoping \
babel-plugin-transform-es2015-block-scoped-functions babel-plugin-transform-es2015-arrow-functions \
babel-plugin-syntax-trailing-function-commas babel-plugin-check-es2015-constants \
babel-preset-react babel-plugin-transform-es2015-modules-commonjs

.babelrcを編集します。(ほぼReduxの構成のパクリです)

babelrc

{
  "presets": ["es2015", "react"],
  "plugins": [
    "transform-es2015-template-literals",
    "transform-es2015-literals",
    "transform-es2015-arrow-functions",
    "transform-es2015-block-scoped-functions",
    ["transform-es2015-classes", { "loose": true }],
    "transform-es2015-object-super",
    "transform-es2015-shorthand-properties",
    "transform-es2015-computed-properties",
    "transform-es2015-for-of",
    "check-es2015-constants",
    ["transform-es2015-spread", { "loose": true }],
    "transform-es2015-parameters",
    ["transform-es2015-destructuring", { "loose": true }],
    "transform-es2015-block-scoping",
    "transform-es2015-modules-commonjs"
  ],
  // process.env.BABEL_ENVに設定されてると反映される
  // この場合はBABEL_ENV=common jsとすることで反映
  "env": {
    "commonjs": {
      ["transform-es2015-modules-commonjs", { "loose": true }]
    }
  }
}

eslint

• npmを使ってインストールします。
• 公式サイト
• .eslintrcを作成します。(2.0.0だとeslint --initが上手く動かないようだ。。)

eslint

# reactの設定テンプレートとプラグインをインストールします
npm install --save-dev eslint-config-rackt eslint-plugin-react

# 2016/3/13追記
# eslint-config-racktはもう使えないようなのでairbnbのものをインストールします
npm install --save-dev eslint-config-airbnb

# 2016/3/8 追記
# 最新のeslint2.3.0だと
# https://github.com/eslint/eslint/issues/5476
# のissueにある通りエラーがでるので2.2.0をインストールします
npm install --save-dev eslint@2.2.0

eslintrc

{
  "parserOptions": {
    "ecmaVeriosn": 6,
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true
    }
  },
  // eslint-config-racktの設定を取り込む
  // 2016/3/13追記
  // racktはもう古いらしいのでairbnbに変更
  // "extends": "rackt", 
  "extends": "airbnb",
  // eslint-plugin-reactで定義されているルールを取り込む
  "plugins": [
    "react"
  ],
  // 2016/3/8 追記
  // eslintかけるとERRORがでる対処
  "rules": {
    "semi": 0,
    "no-var": 0,
    "no-unused-vars": 0,
    "react/jsx-uses-react": 1,
    "react/jsx-no-undef": 2,
    "react/wrap-multilines": 2
  }
}

webpack

• 公式サイト
• webpack.config.jsを作成します。
• babel-loaderの公式サイトではqueryプロパティを設定しているサンプルがあるが、どうやら上手く動かないようだ。。

webpack.config.js

'use strict';

var webpack = require('webparck');
var path = require('path');

var env = process.env.NODE_ENV;
var config = {
  module: {
    loaders: [
      { 
        test: /\.js$/,
        // Arrayの場合はloaders, 文字列だけの場合はloader
        loaders: ['babel-loader?presets[]=react&presets[]=es2015&cacheDirectory'],
        exclude: /node_modules/
      }
    ]
  },
  entry: {
    'build': path.join(__dirname, 'src')
  },
  output: {
    path: path.join(__dirname, 'dist'),
    filename: '[name].[hash].js'
  },
  plugins: [
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify(env)
    }),
    new webpack.optimize.OccurrenceOrderPlugin()
  ],
  resolve: {
    extensions: ['', '.json', '.js', '.jsx'],
  }
};

module.exports = config;

これでsrcに何かコードを置いてwebpackするとdistに出力されます。

react,redux

• npmを使ってインストールします。

react

$ npm install --save-dev react react-dom react-redux redux redux-devtools

# 2016/3/8 追記
# react-routerもインストール
$ npm install --save-dev react-router

まとめ

最終的にpackage.jsonは下記のようになりました。

package.json

{
  "name": "reactex",
  "version": "1.0.0",
  "description": "this is react and flux example",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "koichirola",
  "license": "MIT",
  "devDependencies": {
    "babel-cli": "^6.6.5",
    "babel-core": "^6.6.5",
    "babel-eslint": "^5.0.0",
    "babel-loader": "^6.2.4",
    "babel-plugin-check-es2015-constants": "^6.6.5",
    "babel-plugin-syntax-trailing-function-commas": "^6.5.0",
    "babel-plugin-transform-es2015-arrow-functions": "^6.5.2",
    "babel-plugin-transform-es2015-block-scoped-functions": "^6.6.5",
    "babel-plugin-transform-es2015-block-scoping": "^6.6.5",
    "babel-plugin-transform-es2015-classes": "^6.6.5",
    "babel-plugin-transform-es2015-computed-properties": "^6.6.5",
    "babel-plugin-transform-es2015-destructuring": "^6.6.5",
    "babel-plugin-transform-es2015-for-of": "^6.6.0",
    "babel-plugin-transform-es2015-literals": "^6.5.0",
    "babel-plugin-transform-es2015-modules-commonjs": "^6.6.5",
    "babel-plugin-transform-es2015-object-super": "^6.6.5",
    "babel-plugin-transform-es2015-parameters": "^6.6.5",
    "babel-plugin-transform-es2015-shorthand-properties": "^6.5.0",
    "babel-plugin-transform-es2015-spread": "^6.6.5",
    "babel-plugin-transform-es2015-template-literals": "^6.6.5",
    "babel-preset-es2015": "^6.6.0",
    "babel-preset-react": "^6.5.0",
    "babel-register": "^6.6.5",
    "cross-env": "^1.0.7",
    // 2016/3/8 修正
    "eslint": "^2.2.0",
    // 2016/3/13 追記
    // racktは古いのでairbnbにします
    // "eslint-config-rackt": "^1.1.1",
    "eslint-config-airbnb": "^6.1.0",
    "eslint-plugin-react": "^4.2.0",
    "mocha": "^2.4.5",
    "react": "^0.14.7",
    "react-dom": "^0.14.7",
    "react-redux": "^4.4.0",
    // 2016/3/8 追記
    "react-router": "^2.0.0",
    "redux-devtools": "^3.1.1",
    "webpack": "^1.12.14"
  },
  "browserify": {
    "transform": [
      "loose-envify"
    ]
  },
  "repository": {
    "type": "git",
    "url": ""
  }
}

実装・テスト編に続く・・・（完）