Tweet
Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

おさらい npmって？ 4

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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