趣味Electronアプリの(?:dev)?Dependenciesを晒してみる

[趣味Electron](https://github.com/izumin5210/tomatone)アプリ．ざっくり構成はこんなかんじ:

- JS
    - ViewはReact
    - データの取り回しはImmutable.js + promised-reducer
    - つなぎにreact-dispatcher-decorator
- CSS
    - PostCSS
- module bundler
    - Webpack(v2)
- testing
    - mocha
    - power-assert
    - E2Eはまだやってない

がんばってHMRできる環境つくったけどいらんかった説が根強い．

## package.json

```json
{
  "dependencies": {
    "axios": "^0.15.3",
    "babel-polyfill": "^6.16.0",
    "dexie": "^1.5.1",
    "font-awesome": "^4.7.0",
    "fuse.js": "^2.6.1",
    "immutable": "^3.8.1",
    "menubar": "^5.1.0",
    "moment": "^2.16.0",
    "promised-reducer": "^0.1.0",
    "react": "^15.4.0",
    "react-addons-css-transition-group": "^15.4.1",
    "react-autocomplete": "^1.4.0",
    "react-dispatcher-decorator": "^0.1.5",
    "react-dnd": "^2.1.4",
    "react-dnd-html5-backend": "^2.1.2",
    "react-dom": "^15.4.0",
    "react-hot-loader": "^3.0.0-beta.6",
    "react-router": "^4.0.0-alpha.6",
    "sanitize.css": "^4.1.0",
    "source-map-support": "^0.4.6"
  },
  "devDependencies": {
    "babel-core": "^6.18.2",
    "babel-eslint": "^7.1.0",
    "babel-loader": "^6.2.7",
    "babel-plugin-transform-class-properties": "^6.18.0",
    "babel-plugin-transform-decorators-legacy": "^1.3.4",
    "babel-plugin-unassert": "^2.1.1",
    "babel-preset-es2015": "^6.18.0",
    "babel-preset-power-assert": "^1.0.0",
    "babel-preset-react": "^6.16.0",
    "babel-preset-react-optimize": "^1.0.1",
    "babel-preset-stage-2": "^6.18.0",
    "copy-webpack-plugin": "^4.0.1",
    "css-loader": "^0.25.0",
    "devtron": "^1.4.0",
    "electron": "^1.4.8",
    "electron-builder": "^8.6.0",
    "electron-debug": "^1.1.0",
    "electron-devtools-installer": "^2.0.1",
    "electron-inspector": "^0.1.3",
    "electron-packager": "^8.2.0",
    "electron-rebuild": "^1.4.0",
    "enzyme": "^2.6.0",
    "eslint": "^3.12.2",
    "eslint-config-airbnb": "^13.0.0",
    "eslint-loader": "^1.6.1",
    "eslint-plugin-flowtype": "^2.29.1",
    "eslint-plugin-import": "^2.2.0",
    "eslint-plugin-jsx-a11y": "^2.2.3",
    "eslint-plugin-react": "^6.8.0",
    "express": "^4.14.0",
    "extract-text-webpack-plugin": "^2.0.0-beta.4",
    "fake-indexeddb": "^1.0.8",
    "file-loader": "^0.9.0",
    "flow-bin": "^0.37.4",
    "flowtype-loader": "^0.2.2",
    "html-webpack-plugin": "^2.24.1",
    "jsdom": "^9.8.3",
    "json-loader": "^0.5.4",
    "minimist": "^1.2.0",
    "mocha": "^3.1.2",
    "postcss-apply": "^0.4.0",
    "postcss-color-function": "^2.0.1",
    "postcss-csso": "^1.1.2",
    "postcss-custom-properties": "^5.0.1",
    "postcss-flexbugs-fixes": "^2.0.0",
    "postcss-loader": "^1.1.1",
    "postcss-nesting": "^2.3.1",
    "postcss-reporter": "^2.0.0",
    "postcss-smart-import": "^0.6.6",
    "power-assert": "^1.4.2",
    "promise-test-helper": "^0.2.1",
    "react-addons-test-utils": "^15.4.0",
    "react-dnd-test-backend": "^1.0.2",
    "sinon": "^1.17.6",
    "style-loader": "^0.13.1",
    "stylelint": "^7.5.0",
    "stylelint-config-10up": "github:jonathantneal/stylelint-config-10up",
    "stylelint-config-standard": "^14.0.0",
    "stylelint-declaration-use-variable": "^1.6.0",
    "stylelint-selector-bem-pattern": "^1.0.0",
    "url-loader": "^0.5.7",
    "webpack": "^2.2.0-rc.2",
    "webpack-dev-middleware": "^1.8.4",
    "webpack-hot-middleware": "^2.13.2",
    "webpack-merge": "^0.15.0"
  }
}
```


## dependencies
### Electronまわり
- menubar
    - メニューバーアプリなので
- source-map-support
    - main process側のコードにソースマップつける（あとでエラー追えるように）


### JS（renderer）まわり
#### Model部とか
- immutable
- promised-reducer
    - Reduxのかわり

#### React
- 基本
    - react
    - react-dom
- react-router 4.0.0-alpha.6
    - 4系がいいって聞いた
- react-dispatcher-decorator
    - react-reduxのかわり
    - 受けたイベントはpromised-reducerに流す
- react-addons-css-transition-group
    - いいかんじにCSSアニメーションさせるため
- react-autocomplete
    - `<datalist>`がうまく動かないって聞いたので
- react-dnd / react-dnd-html5-backend
    - ドラッグアンドドロップ操作したかった
    - テスタビリティとかも考慮されてて素敵
- react-hot-loader 3.0.0-beta.6
    - HMR用
    - devDependenciesに入れたら死んだ

#### その他
- axios
    - XHR代替
    - `file://`を取りに行くことがあったためFetch APIだけではムリだった
- dexie
    - IndexedDBのラッパ
    - なぞの独自Promise返ってきて素敵
- fuse.js
    - fuzzy  searchを実装するためのやつ
    - APIはシンプルだけど高速かつ強力
- moment
    - 時間まわり


### CSSまわり
- font-awesome
- sanitize.css
    - reset，normalize，お好みで


## devDependencies
### Webpackまわり
- [Webpack](https://github.com/webpack/webpack) 2.1.0-beta.25
    - 2.x使ったの理由あった気がするけど忘れた
- webpack-merge
    - configを継承したり簡単にできる君
- middlewares
    - [webpack-dev-middleware](https://github.com/webpack/webpack-dev-middleware)
    - [webpack-hot-middleware](https://github.com/glenjamin/webpack-hot-middleware)
        - HMR（Hot Module Replacement: ファイル更新したらアプリも更新されるやつ）したかった
- plugins
    - copy-webpack-plugin
        - フォントとか画像とかコピーする用？（おぼえてない
    - extract-text-webpack-plugin 2.0.0-beta.4
        - CSSをJSとは別ファイルに出す用
    - html-webpack-plugin
        - HTMLにいい感じにJSファイルのパスとか埋める君
- loaders
    - babel-loader
    - css-loader
    - eslint-loader
    - file-loader
    - flowtype-loader
    - json-loader
    - style-loader
    - url-loader


### JSまわり
#### Babel
- babel-core
- presets
    - babel-preset-es2015
    - babel-preset-stage-2
        - `async`/`await`最高じゃないすか
    - babel-preset-react
        - Flowまわりのもはいってる
    - babel-preset-react-optimize
        - Reactまわりをいい感じに最適化してくれる
    - babel-preset-power-assert
        - [power-assert](https://github.com/power-assert-js/power-assert)つかう（テストではもちろん，開発中も）
- plugins
    - babel-plugin-transform-class-properties
        - クラス直下のプロパティ宣言
    - babel-plugin-transform-decorators-legacy
        - react-dispatcher-decoratorで必要
    - babel-plugin-unassert
        - productionコードから`assert`を削除
        - [unassert - encourage reliable programming by writing assertions in production](http://www.slideshare.net/t_wada/unassert)


#### ESLint
- eslint
- babel-eslint
- configs
    - eslint-config-airbnb
- plugins
    - eslint-plugin-flowtype
    - eslint-plugin-import
    - eslint-plugin-jsx-a11y
    - eslint-plugin-react
    

#### テスト
- いつもの
    - mocha
        - テストランナー
    - power-assert
        - アサーション
    - sinon
        - テストダブル（mock, stub, spy, etc.）
        - [testdouble.js](https://github.com/testdouble/testdouble.js)に変更しようか悩んでる
- Reactまわり
    - enzyme
    - jsdom
    - react-addons-test-utils
    - react-dnd-test-backend
        - React DnDを利用しているコンポーネントのテストがやりやすくなる
- その他
    - promise-test-helper
        - [Chapter.3 - Promiseのテスト| JavaScript Promiseの本](http://azu.github.io/promises-book/#chapter3-promise-testing)
    - fake-indexeddb
        - Node.js上で動くIndexedDBのモック
        - IndexedDBが絡むコードをmochaだけでテストできる


#### その他
- [chentsulin/electron-react-boilerplate](https://github.com/chentsulin/electron-react-boilerplate)みたいな環境つくる
    - express
    - minimist
- Flowを叩く
    - flow-bin


### CSSまわり
#### PostCSS
仕様から離れすぎないように，とは思いつつ…

- postcss-apply
- postcss-color-function
- postcss-csso
- postcss-custom-properties
- postcss-flexbugs-fixes
- postcss-nesting
- postcss-reporter
    - stylelintの出力を見る
- postcss-smart-import
    - [postcss-import](https://github.com/postcss/postcss-import)だとHMRが動かなかったので（いまは動くのかも）


#### Stylelint

- stylelint
- stylelint-config-10up
    - sanitize.cssのdevDependenciesに入ってるので（ほぼ意味ないのでpull-req送って消したい）
- stylelint-config-standard
- stylelint-declaration-use-variable
- stylelint-selector-bem-pattern


### Electronまわり
- devtron
- electron
- electron-builder
- electron-inspector
- electron-packager
- electron-rebuild