脱gulpしたいけどkarma startでmochaのテストもeslintもしたいし、watchifyされていたい感じの人向けのJSプロジェクトテンプレートを作った。

タイトルが長い。

書くこと無いなーと思ってぼんやりしていたら生存を心配されてしまったのでハートビート的に何か書くことにしました。 しかし、書くことがあったら書いているのでいっちょ何か作るかーと思ってJSのプロジェクトテンプレートをつくりました(´･_･`)

github.com

js-startについて

勢いに乗ってtextlintでREADMEの日本語もlintされるようにしました。

ディレクトリー構成

.
├── lib
├── node_modules
├── src
└── test
    ├── fixtures
    └── unit

src/index.js にes6で書くと、そこからbabel + browserifyでlib/bundle.jsにまとめてくれる。

テストはmochaで書いてtest/以下に置けばespower-babelifyがpower-assertを使えるようにしつつes6を変換してくれる。

test/unit にはPhantomJSに依存しないテストを置く。

テスト用のHTMLやJSONはtest/fixturesに置いて

  // html
  window.__html__[`test/fixtures/${page}.html];

  // json(拡張子がつかないので注意)
  window.__json__[`test/fixtures/${json}];

のようにするとPhantomJS上でロードできる。

npm scripts

  • npm run build : browserify -t [ babelify ] でlib/bundle.jsを生成。

  • npm run watch : watchify -t [babelify] でファイル監視を開始。ファイル保存時にlib/bundle.jsを生成。

  • lint:js : src, test 以下にeslintを実行。

  • lint:npm : npm-check-updatesでpackage.jsonに書いてあるライブラリーのアップデートを調べる。

  • lint:text : textlintでREADME.mdの日本語を検査する。

  • lint : lint:* をnpm-run-all -pで並列実行。

  • mocha : PhantomJSに依存しないユニットテストを実行する。

  • karma : mochaのテストをPhantomJS上で実行するためのkarma startを実行する。

まとめ

とここまで書きましたが、わりと普通な感じです。istanbulとか入ってないですし。 JSのプロジェクトテンプレートって無限に作られている気がしますが、その時のライブラリの流れとかどのくらいのものを書くのか・どういうテストを書くのか、みたいなのに個人の好みが重なって無限にバリエーションがあると思います。おそらく全部入りのをコピペしても使いこなせないので自分好みのテンプレートをdotfilesのようにGithub上にあげてコツコツ育てていくのが良さそうですね。