Edited at
ElectronDay 24

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

More than 1 year has passed since last update.

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