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

趣味Electronアプリ．ざっくり構成はこんなかんじ:

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

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

package.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 2.1.0-beta.25
  • 2.x使ったの理由あった気がするけど忘れた
• webpack-merge
  • configを継承したり簡単にできる君
• middlewares
  • webpack-dev-middleware
  • 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つかう（テストではもちろん，開発中も）
• 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

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に変更しようか悩んでる
• Reactまわり
  • enzyme
  • jsdom
  • react-addons-test-utils
  • react-dnd-test-backend
    • React DnDを利用しているコンポーネントのテストがやりやすくなる
• その他
  • promise-test-helper
    • Chapter.3 - Promiseのテスト| JavaScript Promiseの本
  • fake-indexeddb
    • Node.js上で動くIndexedDBのモック
    • IndexedDBが絡むコードをmochaだけでテストできる

その他

• 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だと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