はじめに
自分用の忘備録として、flowで書かれたコードをnpmパッケージとして公開する方法をまとめました。
サンプルコード
趣味で作っているゲームの、ロジック部分をnpmパッケージにしたものです。
https://github.com/kaidouji85/gbraver-burst-core/tree/a8fa796762dde89f177a70cd53e9314ca881560d
作成手順
大まかな作成手順は以下の通りです。
(1)flowでコードを書く
(2)ビルド設定を作る
(3)公開
(1)flowでコードを書く
まずは普通にflowでコードを書きます。
外部公開用に特別なことをする必要はありません。
補足
flowには以下ににあるように、型情報をライブラリとして公開する為の機能があります。
しかし、この機能はjQueryなど元々flow型情報を持っていないライブラリに、後から型情報を付ける為のものです。なので、初めからflowを使う場合には、このファイルを作る必要はありません。
(2)ビルド設定を作る
ここが肝になります。
結論から言うと、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 <オリジナルソースのフォルダ> <ビルド結果配置フォルダ>
(3)公開
これでビルドコマンドが完成しましたが、npmパッケージ公開時にビルドをしてくれないと意味がありません。
どうすればいいのかと言うと、package.jsonのscriptsの「prepublish」にビルドコマンドを書けばいいのです。
“scripts”: {
"prepublish": "npm run build",
}
上記設定を追加した後で、npmパッケージ公開コマンドを実行します。
npm punlish
以上で、flow型情報を持ったnpmパッケージの完成です。