selmertsxの素振り日記

ひたすら日々の素振り内容を書き続けるだけの日記

TypeScriptで書いたcliのnpm packageをリリースする方法

背景

人生初の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 に自分のユーザーを作ります。説明どおりにやれば大丈夫です。

f:id:selmertsx:20180111192236p:plain

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

公式ドキュメント以外で参照したページです。お世話になりました。