はい。わたしです。
こちらは 2018年の株式会社LOB Advent Calendar になります。
前回書いた 書いたコードはチャンスさえあればパッケージに切り出して公開すべき という記事はお気持ちしか書いてないポエムだったので、じゃあ実際どうやればいいんだよっていうのを書きます。というのが今回の趣旨です。
ブログが違うのは、あちらは雑記でこちらは技術的な記事のみ、という縛りでかき分けているからです。Qiitaに置けるかどうかみたいな基準で判断してます。
更新を怠っていたらGatsby側に破壊的変更が入りまくったらしく、わけがわからなくなってしまった…のでっらぃょ……
なお、今回の記事では普段普通にJavaScriptを使って開発している方を想定して書いてあるので、babelとか触ったことないよーという方には不親切に感じることがあるかもしれませんがあしからず。
npmパッケージの基本
今回の説明で扱うサンプルのリポジトリです。
react-list-throttle-component
npmでのパッケージの公開には当たり前ですがアカウント登録が必要です。
https://www.npmjs.com/signup でユーザー登録しましょう。
終わったらnpmコマンドのほうで登録したアカウントとの紐付けをおこないます。 https://docs.npmjs.com/cli/adduser
次に普通に開発用リポジトリを用意します。GitHubでもなんでも好きなやつを用意しましょう。
普段の開発では npm install するときの依存パッケージの管理程度の存在感しかありませんが、 npmパッケージのメタ情報は package.json に集約されています。
なので普段は npm init してからEnterを連打しているかもしれませんが、今回は真面目に情報をいれていきます。
どの項目も名前からして自明だとおもいますが、わからない点などがあったら公式の開発者向けドキュメントとかを読むといいとおもいます。読めばわかるのでここでは瑣末な設定項目の話はしません。 https://docs.npmjs.com/misc/developers
注意すべき項目
普通に開発する分には dependencies と devDependencies だけを気にして入ればいい（ということはなく、インストールしたパッケージの依存が壊れてたときに対処できるように知っておいたほうがいい）のですが、パッケージとして公開する場合、それがなんらかのプラグインみたいな動き方をする（Reactコンポーネントみたいな）のであれば peerDependencies という項目について調べておく必要があるかもしれません。調べましょう。ぶっちゃけ少数しか使わないようなパッケージなら必要ないとおもうのでまずは無視してもいいとおもいます。
また、 files, main と bin も必要に応じて設定しましょう。
main で設定したファイルが、パッケージのエントリーポイントになります。bin は、cliコマンドで実行可能なパッケージを公開したい場合は設定する必要のあるコマンドになります。
TypeScriptでnpmパッケージを作成にするにあたって注意するべき項目
上の説明や貼ってある公式ドキュメントの説明を読むと完結さにビビるとおもうのですが、npmのパッケージ公開自体はめちゃくちゃ簡単です。
しかし現代のJavaScriptはbabelなどのトランスパイラとともに存在しており、そこが話をややこしくしています。
僕がこの記事で具体的なコマンドを羅列したチュートリアルにしたくないものここが関わっています。 何をどうコンパイルするかは人それぞれ、また時期によって変わるなのだからコピペで設定するべきではありません。
というわけで、好きにやりましょう。しかし多くのプロジェクトでは src/ 以下にソースコードを配置して、 lib/ 以下にコンパイル後のコードを配置することが多いようです。そのほうがignoreの設定も書きやすいですしね。
それと、TypeScriptのために特別に必要な項目として type があります。
TypeScriptのままで公開するのであれば不要ですが、そうでない場合、JavaScriptのコードと型定義ファイル (.d.ts) に分けて公開することになるでしょう。 type は main と同じように、型定義のエントリーポイントを公開するためのものになります。
設定例
詳しくは僕のサンプルパッケージを参照してください。
パッケージをアップロードするためのコマンドは publish なので、 prepublish にソースのビルドなどの必要なコマンドを設定しておくとミスを減らせるとおもいます。今回のサンプルでは prepublish スクリプトに npm run clean && npm run compile を設定していますね。
ビルドに関しては、僕は今回はめんどくさいので tsc で直接ビルドして lib/ 以下に投げ込んでしまっています（tsconfig.jsonで設定）。
まとめ
- ユーザー登録
- cliでuseradd
- package.jsonの設定
- コードを書く
- コードをビルド
- publish!!!!!!
ね、簡単でしょ？
