背景
人生初のnpm packageをリリースしました。
画像を所定のフォーマットで圧縮してくれるCLIです。現在はシンプルに画像を圧縮するだけですが、おいおい未圧縮の画像を検知する機能であったり、gitのpre-commitにhookして自動で圧縮する機能などを追加していこうと考えています。なお、このpackageはTypeScriptで書かれています。
本日のブログでは、npm packageをリリースする方法、TypeScript(altJS 全般で使えそう)でnpm packageを作る際の方法、npm packageでcliを作る際の注意点について記載していきます。
なお、今回の npm package が僕の初めてのリリースですので、間違った部分や至らない部分があるかもしれません。そこを意識して見て頂ければ幸いです。誤りなどありましたら、コメントを頂けると喜びます！
npm packageをリリースする
シンプルな npm packageであれば、下記の手順を踏めば簡単に npm packageをpublishすることが可能です。
- npmjs にユーザー登録する
- npm config にnpmjsに登録したユーザー情報を設定する
- npm の2要素認証設定をする
- npm packageをpublishする
以降、図を使いながらより詳細に説明していきます。
npmjsにユーザー登録する
https://www.npmjs.com/signup
上記URLにアクセスして npmjs.com に自分のユーザーを作ります。説明どおりにやれば大丈夫です。
npm configにユーザー情報を設定する
terminal から npm login と叩いて、npmjs に登録したユーザー情報を入力します。
問題なく設定できてたら、npm whoami と叩くと自分のユーザー名が返されます。
$ npm login
Username: ${yourName}
Password:
Email: (this IS public) ${yourEmail}
Logged in as shuhei.morioka on https://registry.npmjs.org/.
$ npm whoami
${yourName}
参考URL: Redirecting…
2要素認証をする
自分のpackageに悪さされないように、2要素認証も入れておきましょう。
Requires npm version 5.5.1 or greater
2要素認証は、 バージョンが5.5.1以上のnpmから対応されているため、必要であればnpmのバージョンを上げましょう。
$ npm -v
3.10.10
$ npm update -g npm
/nodepath/node/v6.10.3/lib
└── npm@5.6.0
$ npm -v
5.6.0
$ npm profile enable-2fa
するとバーコードがterminal上で表示されるので、表示されたバーコードを使って2要素認証の設定ができるようになります。
参考URL: Redirecting…
npm packageをpublishする
$ npm publish --access public (--otp xxxx)
上記コマンドで作成したpackageをリリースすることができます。ただし2要素認証の設定をしていた場合、--otpのあとにotpcodeを入力することを忘れないで下さい。
TypeScriptでnpm packageを作る
nodejsのシンプルなコードであれば、上記の手順でnpm packageをpublishすることができます。ただしTypeScriptなどのaltJSを使って開発をしている場合、build後のコードはGitでは管理しないけれども、packageには含めたくなります。
gitでは管理していないコードをpackagesに含めるための方法は２つあって、.npmignoreを使う方法と、packages.jsonのfiles fieldを利用する方法です。ざっくり書くと .npmignoreはブラックリストであって、packages.jsonのfiles fieldはホワイトリストになります。確認が容易なものではないので、何を入れるのか明示的に指定したほうが事故がないと判断し、今回は packages.json の files fieldを採用しました。
packages.json の files field
ioptにおける files field の設定内容は下記のように、たった2行になります。
# packages.json
"files": [
"build",
"bin"
],
iiopt/package.json at master · speee/iiopt · GitHub
files fieldはデフォルトで、package.json、README、CHANGES、LICENSE、NOTICE 等のファイルを含めます。なので、ここに記載するコードは少なくてすみます。
https://docs.npmjs.com/files/package.json#files
altJSを使った npm packageをリリースする上で、必要だった作業は僕がやった限りこれだけでした。
npm packageでCLIを作る上での注意点
CLIツールのコマンドは、参考資料に示すように bin fieldに実行コードへのパスを指定し、yarn linkすることによって使えるようになります。
# packages.json
"bin": {
"iiopt": "./bin/cli"
},
$ yarn link
yarn link v1.3.2
success Registered "@speee/iiopt".
info You can now run `yarn link "@speee/iiopt"` in the projects where you want to use this module and it will be used instead.
✨ Done in 0.14s.
yarn linkを実行した際に、/usr/local/bin/iiopt に対して、bin fieldsで指定したコードのパスへのリンクを貼ることで、コマンドが使えるようになります。
$ ls -l /usr/local/bin/iiopt
/usr/local/bin/iiopt -> /path_to_iiopt/iiopt/bin/cli
その他
packages.jsonの整理や抜け漏れチェックには fixpackが便利だった
nodejsで開発をしていると、packages.jsonの要素の順番がごちゃごちゃしてきたりします。
また初めてのnpm package開発だと、packages.jsonに何を記載すれば良いのか分からないと思います。
fixpackは、その問題に対する解決方法になります。
$ fixpack
missing main
package.json already clean!
上が、fixpackの実行結果になります。packages.jsonの中に記載されていない情報があれば、通知してくれます。また、中の要素もfixpack指定の順番に並べてくれます。
最後
以上、npm packageをリリースする方法を記載しました。
参考URL
公式ドキュメント以外で参照したページです。お世話になりました。
