モチベーション
フロントエンドをやっているのに npm パッケージの一つも作ったことが無いなんて！
ということに気が付いて、ちょうどいい感じのコードがあったので試しに作りました。
ソースコードは TypeScript で書いています。
参考
https://qiita.com/TsutomuNakamura/items/f943e0490d509f128ae2
https://liginc.co.jp/353537
https://codeburst.io/https-chidume-nnamdi-com-npm-module-in-typescript-12b3b22f0724
成果物
npm: https://www.npmjs.com/package/array-compressor
github: https://github.com/kik4/array-compressor
ちなみに
どんな内容のパッケージかというと、配列を{ 値, 後に連続する回数 }の形の配列に変換する処理です。
# 入力
[1,1,1,2,2,3]
# 出力
[ { value: 1, count: 3 },
{ value: 2, count: 2 },
{ value: 3, count: 1 } ]
逆変換も作りました。
現時点だとまだオブジェクトの配列の場合については想定していないので機能拡張するつもりです。
手順
参考記事が本当に参考になるので詳細はそちらで、ここでは行動記録とちょっと気を付けたところを書きます。
npm ユーザを作成
npmjsにアクセスしてアカウントを作ります。
ついでに二要素認証も有効化。
コンソールで npm ユーザを登録
npm adduser
username、password、email address を入力します。
npm パッケージ情報の入力
npm init
順番に入力して package.json が出来上がりました。
適当に enter 連打してもいいです。後で package.json を直接弄ればいいので気楽にいきましょう。
参考記事を見つつ自分で設定。
テストなので version を 0.1.0 に。
scripts の prepublish は一度設定したらば「もう使わないよ！」と警告が出たので prepare に書き換えました。
{
"scripts": {
"prepare": "tsc",
"build": "tsc"
}
}
keywords も関係ありそうなワードを追記。
{
"keywords": [
"array",
"compress"
]
}
プロジェクトの作成
GitHub にリポジトリを作り、typescript 突っ込んだり tslint 入れたり prettier 入れたり jest 入れたり本体書いたり何やかんやしました。
基本的にはプロジェクトを普通に作るところなので詳細は書きませんが、いくつか学んだことを書きます。
型情報を添付
npm パッケージは最終的に js なので ts で使うには型情報が無くなるはず。しかし一部のパッケージは型情報がしっかり入っています（.d.ts ファイルの形で）。
これのやり方がわからなかったんですが、tsconfig.json に設定すると自動で書き出してくれました。
{
"compilerOptions": {
"declaration": true
}
}
テストコードを配布しない
途中まで src の下にテストコードを入れていたのですが、そうするとビルド時に一緒に出力されて配布されてしまいます。
test フォルダを別に切って格納しました。
.npmignore ファイルの追加
.prettierrc
tsconfig.json
tslint.json
test/
src/
これらは開発する上では必要ですが公開パッケージに不要なので設定追加しました。
npm に公開
npm publish
これで無事に公開されました！
試しに自分のプロジェクトに入れてみてもしっかり使えますし、型推論も効きます。成功ですね。
けれど少し足りないところがあったので以下修正…。
README.md を書く
使い方を書きます。
TypeScript での使い方はすでに使っているコードがあるのですぐに書けました。
JavaScript での使い方は node コマンドで対話モードにして調べました。
でも何度か間違ってその度に publish し直すことになりましたけど…。
npm パッケージの更新
公開と同じコマンドですが、package.json の version を上げておかないと失敗してしまいます。
# patchのバージョンを上げる(major/minorもあり)
npm version patch
# 公開
npm publish
追記：CircleCI で自動テスト&公開
以前から使っている CircleCI で自動テストと公開をやってもらいます。
.circleci/config.yaml を作成します。
設定内容は CIrcleCI のブログに記事が出てきました。これを使わせてもらいましょう。
https://circleci.com/blog/publishing-npm-packages-using-circleci-2-0/
ただ解説と設定がなんか違う気がするので後で直します。
npm_TOKEN の設定
環境変数に npm_TOKEN を追加します。token は npm のページの右上アイコンの Tokens から作成して設定。
これ、一回ビルドしないとプロジェクトが一覧に追加できなくて環境変数も設定できないんですが…最初一回失敗ビルドして進めました。
git でタグを設定
上記ではバージョンのタグ（v0.1.0のような）を打ったコミットを公開するようになっています。
適当にタグを打ってしまっていたので全部修正することに。
コミットして確認
コミットして自動で公開されるのを確認。設定完了です。
ついでに README.md にバッジを追加しておきました。