はじめての npm ライブラリ公開

TL;DL

成果物

www.npmjs.com

github.com

以下の記事で照会されたCLIアプリを自分用に作成しnpm で公開したので、作成方法や公開方法をメモとして残す。

名刺の代わりにCLIアプリを書く

npm ライブラリの公開方法はこっちを参考にした

3分でできるnpmモジュール

動機

• OSSに貢献したいと思っていたが、なかなかコントリビュートは難しいと感じていたところ、これなら自分でもなんとかできそうだと感じた😁

はじめてのnpmライブラリにちょうどいいかも知れない。

• bash が苦手なので、なるべく Python とか普段書いてる JS とかでコマンドを使いたいと思ったときにちょうど node.js で bash を実行する方法を調べたので Github で公開したいと思った。（この話は別の記事で書く） このJSで実行するコマンドのサンプルに今回作ったCLIアプリを入れておけば、さらに名刺代わりにもなり一石二鳥かな〜という打算

作成手順

まずは落としてくる

git clone git@github.com:akameco/akameco.git

npm package のインストール

$ yarn

実行方法

package.json のスクリプトを見ても、なんとなく fmt とか lint とかしかなくてそもそもこの CLI アプリをどうやって実行するかわからなかった。 src/cli.js の中身をみるとこれを実行するとイイっぽいので実行。

$ node src/cli.js

こんな感じで表示される

補記

どうやら、CLI アプリの実行定義は package.json の "bin" というところに記載するとのこと。 実際にpackage.json を見ると "bin": "src/cli.js" と書いてある

プログラムの変更箇所

修正箇所はakaneco で検索しつつ、メインは src/avatar.png や src/ui.js の items あたりを見ればわかる。 readme.md とかlicense も変更しておく。

最低限このあたりをかえれば、動く。

const items = [
  {
    label: 'Website',
    url: 'https://akameco.github.io',
  },
  {
    label: 'Twitter',
    url: 'https://twitter.com/akameco',
  },
  {
    label: 'GitHub',
    url: 'https://github.com/akameco',
  },
  {
    label: 'Qiita',
    url: 'http://qiita.com/akameco',
  },
  {
    label: 'Quit',
    action() {
      process.exit() // eslint-disable-line no-process-exit,unicorn/no-process-exit
    },
  },
]

module.exports = () => (
  <div>
    <br />
    <div>
      <Text>I’m a Web FrontEnd developer.</Text>
    </div>
    <br />
    <SelectInput items={items} onSelect={handleSelect} />
  </div>
)

npm ライブラリの公開方法

詳しくは冒頭で書いたリンクに乗っているが、簡単に説明。

• 以下にアクセスし、サインアップ。username がキモなので、自分のCLI アプリ名と合わせておく

https://www.npmjs.com/

• さっき作業していた CLI アプリの git 情報を自分の git 情報で上書き（実際は削除して新規）

$ sudo rm -rf .git

git のレポジトリに公開

$ git init
$ git add .
$ git commit -m "init"
$ git remote add origin https://github.com/nkgrnkgr/nkgrnkgr.git
$ git push origin master

• npm adduser

さっき npmjs.com で作ったアカウント情報を登録していく

$ npm adduser

• 公開

$ npm publish

無事成功すれば以下のコマンドでパッケージが実行できる

$ npx nkgrnkgr

感想

npm パッケージの公開方法が簡単すぎて感動した🎉 つぎは CLI だけでなく、実際にモジュールをインポートして使ってもうライブラリを書いてみたい。

おわり