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

  • 7
    いいね
  • 0
    コメント

趣味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
  • 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

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を利用しているコンポーネントのテストがやりやすくなる
  • その他

その他

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