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

#Zli_CA_LT

Transcript

1. はじめての npm パッケージ作り 2020-08-22 Zli x CA 合同LT
2. はじめまして & こんにちは！ ﹡ Sachiko Tajima ◦ twitter: schktjm ◦ github: schktjm ﹡ 会津大学 B4 ◦ s1250117 ﹡ フロントエンド とか ﹡ カタンが好き(new!) 2 最近はこっち
3. npm にcliで動かせるパッ ケージをあげた話をします！ nanika kakkoii somewords
4. おさらい npmって？ 4
5. npm とは ﹡ Node Package Manager の略 ﹡ JavaScript 系のパッケージを管理するツー ル。 ﹡ https://docs.npmjs.com/about-npm/ 自分用便利パッケージを公開する 難易度は低め 5
6. それではやってみよう！ yatteiki!
7. slackmoji 絵文字の入力がめんどくさくなった時用 に、:heart: とかを ❤ に変えてくれるcli 今回作ったのは 7 (ほんとはこれゴール予定だったけど正規表現書いたら終わったので公開することにしました)
8. 最低限必要なステップは3つ！ 1. cli をつくる！ 2. npm をごにょごにょする！ 3. npm publishする！ 8
9. 最低限必要なステップは3つ！ 1. cli をつくる！ 2. npm をごにょごにょする！ 3. npm publishする！ 9
10. 1. まずはcliをつくる まずはcliを作ります。今回はこんな感じ 10 引数をとる 文字列を変換する 出力
11. 1. まずはcliをつくる うまくいきました。 11
12. 最低限必要なステップは3つ！ 1. cli をつくる！ 2. npm をごにょごにょする！ 3. npm publishする！ 12
13. 2. npmをごにょごにょする 実際のコマンドのように動かせるようにします。 ここで行うのは3つ。 1. npm init -y 2. 実行ファイルをつくる 3. package.json の bin にコマンドの設定 13
14. 2. npmをごにょごにょする npm init -y package.json が必要なので npm の init コマンドで初期化しま す。 -y でなく逐一入力しても問題ないです。 14
15. 2. npmをごにょごにょする 実行ファイルを作る bin/cli.js をつくります。また先ほどの lib/index.js を外部から扱 えるようにモジュール化します。 15
16. 2. npmをごにょごにょする package.json の bin にコマンドの設定 package.json の bin フィールドでコマンドとファイルのマッピング ができるらしいです。(https://docs.npmjs.com/files/package.json#bin) 16
17. 2. npm をごにょごにょする これでコマンドの出来上がりです！ 17
18. 最低限必要なステップは3つ！ 1. cli をつくる！ 2. npm をごにょごにょする！ 3. npm publishする！ 18
19. 3. npm にぱぶりっしゅする！ 最後に誰でもこのコマンドを使えるように publish します！ 1. npm にログインする 2. package.json の name とpublishConfig を編集 3. npm publish 19
20. 3. npm にぱぶりっしゅする！ npm にログインする npm にログインしていることを確認します。 なかったらアカウントを作りましょう！ Creating a new user account on the public registry terminal で npm whoami と打った時に自分の名前が出れば成 功です。 20
21. 3. npm にぱぶりっしゅする！ package.json の name と publishConfig を編集 name は @<ユーザー名>/<パッケージ名> に publishConfig は 状況に合わせて！ see: https://docs.npmjs.com/files/package.json#publishconfig 21
22. 3. npm にぱぶりっしゅする！ npm publish 打つとnpmでパッケージを確認することができました！ 22
23. 所感 初めてパッケージ公開しましたがとても簡単 & やってみた 記事が多く難易度が低めでした！ 自分用の便利パッケージとか作るのもいいかも。 23
24. Thanks! https://github.com/schktjm/slackmoji https://www.npmjs.com/package/@schktjm/slackmoji