はじめに

自分用の忘備録として、flowで書かれたコードをnpmパッケージとして公開する方法をまとめました。

サンプルコード

趣味で作っているゲームの、ロジック部分をnpmパッケージにしたものです。
https://github.com/kaidouji85/gbraver-burst-core/tree/a8fa796762dde89f177a70cd53e9314ca881560d

大まかな作成手順は以下の通りです。

(1)flowでコードを書く
(2)ビルド設定を作る
(3)公開

まずは普通にflowでコードを書きます。
外部公開用に特別なことをする必要はありません。

flowには以下ににあるように、型情報をライブラリとして公開する為の機能があります。

しかし、この機能はjQueryなど元々flow型情報を持っていないライブラリに、後から型情報を付ける為のものです。なので、初めからflowを使う場合には、このファイルを作る必要はありません。

ここが肝になります。
結論から言うと、flowで書かれたコードから以下の二つを生成します。

(A) flowのコードをcommon.js形式に変換したもの
(B) flowのコードをそのままコピーしてファイル名の末尾に.flowを追加する

イメージ的にはbabelで変換したコード、flowのオリジナルコードをまとめて公開する、というものです。
なぜflowオリジナルコードの末尾に.flowを追加する必要があるのかと言うと、flowにはDeclaration filesと言う仕組みがあるからです。

###(A)flowのコードをcommon.js形式に変換
サンプルコードでは(A)に相当するものは、package.jsonのscriptsの「build-src」です。

.babelrcの設定

{
  "presets": ["es2015", "stage-2", "flow"]
}

ビルドコマンド

babel <オリジナルソースのフォルダ> -d <ビルド結果配置フォルダ>

###(B)flowのコードをそのままコピーしてファイル名の末尾に.flowを追加

サンプルで(B)の相当するものは、package.jsonのscriptsの「copy-flow」です。

ビルドコマンド

flow-copy-source <オリジナルソースのフォルダ> <ビルド結果配置フォルダ>

これでビルドコマンドが完成しましたが、npmパッケージ公開時にビルドをしてくれないと意味がありません。
どうすればいいのかと言うと、package.jsonのscriptsの「prepublish」にビルドコマンドを書けばいいのです。

“scripts”: {
  "prepublish": "npm run build",
}

上記設定を追加した後で、npmパッケージ公開コマンドを実行します。

npm punlish

以上で、flow型情報を持ったnpmパッケージの完成です。