「自分でJSのライブラリ作ろう！」と思った時、ソース・テストのディレクトリ構成、ES6+で書くべきか、型定義、テストFW、CI、ビルド方法、ドキュメント作成など考えておきたいことが色々あって、そんなこと考えている間に飽きてしまうことってよくありますよね。え、ない？
そこで、メジャーなOSSがどうしているのかを見ておけば、大体の指針を得られるのではないか、と思いざっと調べてみました。
※ライブラリの選び方は適当です
ImmutableJS
https://github.com/facebook/immutable-js
| . | ImmutableJS |
|---|---|
| 種類 | Utility(Isomorphic) |
| ソース記述 | ES6+ |
| テスト記述 | TypeScript |
| 型記述 | TypeScript + Flow |
| テストランナー/FW/レポート | Jest |
| チェック/整形 | eslint / tslint / prettier |
| ベンチマーク | benchmark |
| CI | Travis |
| タスクランナー | npm script + gulp |
| ビルド | rollup |
| ドキュメント | React |
ソース・テスト階層
src/**/*.js __tests__/**/*.ts
express
https://github.com/expressjs/express/
| . | express |
|---|---|
| 種類 | WAF(NodeJS) |
| ソース記述 | Legacy JS |
| テスト記述 | Legacy JS |
| 型記述 | - |
| テストランナー/FW/レポート | mocha / should / istanbul |
| チェック/整形 | eslint |
| ベンチマーク | wrk |
| CI | Travis / AppVeyor |
| タスクランナー | npm script |
| ビルド | - |
| ドキュメント | - |
ソース・テスト階層
lib/**/*.js test/**/*.js
Semantic UI React
https://github.com/Semantic-Org/Semantic-UI-React
| . | Semantic UI React |
|---|---|
| 種類 | React Component Library(Browser) |
| ソース記述 | ES6+ |
| テスト記述 | ES6+ |
| 型記述 | TypeScript |
| テストランナー/FW/レポート | karma + mocha + chai + enzyme + sinon |
| チェック/整形 | eslint + tslint + satisfied |
| ベンチマーク | - |
| CI | CircleCI + Codecov |
| タスクランナー | npm script + gulp |
| ビルド | webpack |
| ドキュメント | React + doctoc |
ソース・テスト階層
src/**/*.js test/**/*-test.js
Material UI
https://github.com/mui-org/material-ui
| . | Material UI |
|---|---|
| 種類 | React Component Library(Browser) |
| ソース記述 | ES6+ |
| テスト記述 | ES6+ |
| 型記述 | TypeScript |
| テストランナー/FW/レポート | karma + mocha + chai + enzyme + sinon + nyc(istanbul) |
| チェック/整形 | eslint + eslint(spellcheck) + prettier + size-limit |
| ベンチマーク | - |
| CI | CircleCI + Codecov + Argos-CI |
| タスクランナー | npm script |
| ビルド | webpack |
| ドキュメント | React + next |
ソース・テスト階層
src/**/*{.js,.d.ts}
src/**/*.spec.js
備考:
- flowを使っていたがやめたっぽい: https://github.com/mui-org/material-ui/pull/9453
Sequelize
https://github.com/sequelize/sequelize
| . | Sequelize |
|---|---|
| 種類 | ORM(NodeJS) |
| ソース記述 | ES6+ |
| テスト記述 | ES6+ |
| 型記述 | |
| テストランナー/FW/レポート | mocha + chai + istanbul |
| チェック/整形 | eslint |
| ベンチマーク | - |
| CI | Travis + AppVeyor + Codecov |
| タスクランナー | npm script |
| ビルド | - |
| ドキュメント | esdoc |
ソース・テスト階層
lib/**/*.js test/**/*.test.js
Redux
https://github.com/reactjs/redux/
| . | Redux |
|---|---|
| 種類 | Utility(Browser) |
| ソース記述 | ES6+ |
| テスト記述 | ES6+ |
| 型記述 | TypeScript |
| テストランナー/FW/レポート | jest |
| チェック/整形 | eslint + prettier |
| ベンチマーク | - |
| CI | Travis |
| タスクランナー | npm script |
| ビルド | rollup |
| ドキュメント | GitBook |
ソース・テスト階層
src/**/*.js test/**.spec.js
Bluebird
https://github.com/petkaantonov/bluebird
| . | Bluebird |
|---|---|
| 種類 | Promise Library(Isomorphic) |
| ソース記述 | Legacy JS |
| テスト記述 | Legacy JS |
| 型記述 | - |
| テストランナー/FW/レポート | mocha + assert + istanbul |
| チェック/整形 | jshint |
| ベンチマーク | - |
| CI | Travis |
| タスクランナー | npm script |
| ビルド | - |
| ドキュメント | - |
ソース・テスト階層
src/**/*.js test/**/*.js
Commander
https://github.com/tj/commander.js
| . | Commander |
|---|---|
| 種類 | Library for CLI(NodeJS) |
| ソース記述 | Legacy JS |
| テスト記述 | Legacy JS |
| 型記述 | TypeScript |
| テストランナー/FW/レポート | Shell |
| チェック/整形 | eslint |
| ベンチマーク | - |
| CI | Travis |
| タスクランナー | npm script |
| ビルド | - |
| ドキュメント | - |
ソース・テスト階層
index.js test/**/*.js
考察
記述言語や型:
- Nodeのみのライブラリは、Legacyで書かれているものも多い。その他多くはES6+で書かれている。
- 移行がダルいか、Blurbirdのようなprimitive系はLegacyとの互換性を意識しているため等じゃなかろうか、知らんけど。
- 型についてはTypeScript＞Flow。ただし、実装コードで使用するケースは少なく、あくまで型定義の公開に留めているものが多い。
- ImmutableのようにテストだけTypeScriptで書くという手もあるようだ。
UIライブラリ
- UIライブラリは、他のnpmライブラリに比べるとテストが細かい
- MaterialUIのテスト技術スタックがとても参考になる
テスト・カバレッジ
- テストFWはmochaがほとんど。jestが少々。
- カバレッジツールとしてistanbulがかなり普及している
整形
- ほとんどのライブラリが整形にeslintを採用している
- まれにprettierを使用して整形しているものもある
CI
- 小さいものはTravis。大きいものはCircleCI、Codecov、AppVeyorなど。
タスクランナー
- タスクランナーについては、あまりgulpが使われていなくて、npm scriptで完結するパターンが多い。
ビルド
- isomorphicなユーティリティライブラリはrollupを使ってビルドされているものが多い
ドキュメント化
- ドキュメント化については、Reactライブラリ系はReactで書かれている。
- ジェネレータ系でメジャーなものはあまりなさそう。
- Markdown → doctocというのがあるらしい
- HTML → ESDocが良さげ
ディレクトリ構成
- ディレクトリは
srcとtestの並列が多いが、MaterialUIのようにsrcにテストを含めるケースも存在する。
その他感想
- istanbulは使ったことがないので今後調べたい
- Argos-CIは知らんかった。こんなんあるんや。
- ReduxのGitBookが読みやすいので使ってみたい
