はじめての npm パッケージ作り

はじめての npm パッケージ作り 2020-08-22 Zli x CA 合同LT

はじめまして & こんにちは！ ﹡ Sachiko Tajima ◦ twitter: schktjm ◦
github: schktjm ﹡ 会津大学 B4 ◦ s1250117 ﹡ フロントエンドとか ﹡ カタンが好き(new!) 2 最近はこっち

npm にcliで動かせるパッケージをあげた話をします！ nanika kakkoii somewords

おさらい npmって？ 4

npm とは ﹡ Node Package Manager の略 ﹡ JavaScript 系のパッケージを管理するツー
ル。 ﹡ https://docs.npmjs.com/about-npm/ 自分用便利パッケージを公開する難易度は低め 5

それではやってみよう！ yatteiki!

slackmoji 絵文字の入力がめんどくさくなった時用に、:heart: とかを ❤ に変えてくれるcli 今回作ったのは 7 (ほんとはこれゴール予定だったけど正規表現書いたら終わったので公開することにしました)

最低限必要なステップは3つ！ 1. cli をつくる！ 2. npm をごにょごにょする！ 3. npm publishする！
8

9

1. まずはcliをつくるまずはcliを作ります。今回はこんな感じ 10 引数をとる文字列を変換する出力

1. まずはcliをつくるうまくいきました。 11

12

2. npmをごにょごにょする実際のコマンドのように動かせるようにします。ここで行うのは3つ。 1. npm init -y 2. 実行ファイルをつくる
3. package.json の bin にコマンドの設定 13

2. npmをごにょごにょする npm init -y package.json が必要なので npm の init
コマンドで初期化します。 -y でなく逐一入力しても問題ないです。 14

2. npmをごにょごにょする実行ファイルを作る bin/cli.js をつくります。また先ほどの lib/index.js を外部から扱えるようにモジュール化します。 15

2. npmをごにょごにょする package.json の bin にコマンドの設定 package.json の bin フィールドでコマンドとファイルのマッピング
ができるらしいです。(https://docs.npmjs.com/files/package.json#bin) 16

2. npm をごにょごにょするこれでコマンドの出来上がりです！ 17

18

3. npm にぱぶりっしゅする！最後に誰でもこのコマンドを使えるように publish します！ 1. npm にログインする 2.
package.json の name とpublishConﬁg を編集 3. npm publish 19

3. npm にぱぶりっしゅする！ npm にログインする npm にログインしていることを確認します。なかったらアカウントを作りましょう！ Creating a
new user account on the public registry terminal で npm whoami と打った時に自分の名前が出れば成功です。 20

3. npm にぱぶりっしゅする！ package.json の name と publishConfig を編集 name
は @<ユーザー名>/<パッケージ名> に publishConfig は状況に合わせて！ see: https://docs.npmjs.com/files/package.json#publishconfig 21

3. npm にぱぶりっしゅする！ npm publish 打つとnpmでパッケージを確認することができました！ 22

所感初めてパッケージ公開しましたがとても簡単 & やってみた記事が多く難易度が低めでした！自分用の便利パッケージとか作るのもいいかも。 23

Thanks! https://github.com/schktjm/slackmoji https://www.npmjs.com/package/@schktjm/slackmoji

はじめての npm パッケージ作り

はじめての npm パッケージ作り

Tajima Sachiko

More Decks by Tajima Sachiko

Other Decks in Programming

Featured

Transcript