flowtype で typescript の *.d.ts のように型定義 *.js.flowを出力する

やりたいこと

flowで書かれた npmパッケージを作成する時、webpack/browserifyでバンドルされるのを想定してes5水準までコンパイルしつつ、かつflowの型定義も外部ファイルに頼らず提供したい

.babelrc
package.json
src/ # ソース
  index.js
  index.test.js
lib/ # コンパイル済み
  index.js
  index.js.flow

*.test.js はスキップしつつ、コンパイル済みの index.js と index.js.flow を作成したい

方法

babelの設定は省略。yarnを使ってるけどnpmに置き換えれば良いとして、yarn add babel-cli flow-bin -D を前提として

package.json

{
  ... 略
  "scripts": {
    "build:flow-gen": "flow gen-flow-files src/ --out-dir lib --ignore '.*.test.js'",
    "build:js": "babel src -d lib --ignore test.js",
    "prepublish": "yarn build:js && yarn build:flow-gen"
  },
  "files": [
    "lib/"
  ]
}

テストするときは babel-register なり babel-node なりでそのまま実行すれば良い。正しいコンパイルが行われているかはbabelの責務なので。

意味

- babel-cli で src => lib へコンパイル
- flow gen-flow-files で lib へ 型定義ファイルの書き出し
- files で publish 対象を lib に限定
- prepublish で npm publish 前に実行するコマンドとしてフック