初めてnpmパッケージを作って公開した

2021年03月31日

作ったもの

gatsbyの新規記事テンプレートを生成するcliツール

目標

$ yarn add --dev gatsby-new-post-generatorでインストールし、
$ yarn newpost ${blogTitle}のように利用できるようにする。

インストールするだけでcliから利用可能にしたい

前回の記事ではpackage.jsonのscriptにコマンド名とスクリプトのパスを設定することでcliから利用することができた。
今回はnpmパッケージとして扱いたいので、package.jsonを作成する。
$ npm init
パッケージ名やその他諸々の情報を含んだpackage.jsonが生成される。

npmリポジトリからインストール後、追加設定(package.jsonのscriptへ追記)を行うことなくcliから利用できるようにしたい。
そのため、以下のようにpackage.jsonを変更した。

{
  "name": "gatsby-new-post-generator",
  "version": "1.0.0",
  "description": "Generate gatsby new post(.md) cli script",
  "main": "./lib/newpost.js",
  "bin": {
    "newpost": "bin/index.js"
  },
  "repository": {
    "type": "git",
    "url": "git+ssh://git@github.com/eginoy/gatsby-new-post-generator.git"
  },
  "author": "eginoy",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/eginoy/gatsby-new-post-generator/issues"
  },
  "homepage": "https://github.com/eginoy/gatsby-new-post-generator",
  "scripts": {
  },
  "keywords": [
    "gatsby-new-post"
  ],
  "directories": {
    "lib": "lib"
  }
}

mainとbinの設定がポイントで、binに設定したnewpostがcliから呼び出す際のスクリプト名称になっている。
処理はmainで指定している./lib/newpost.jsに記述している。

ローカルで動作確認

yarn addコマンドの引数にファイルパスを渡すと、ローカルのパッケージを追加することが可能。
そのため、npmjsリポジトリへ公開する前にローカルで動作確認を行うことができる。
$ cd ${gatsby_blog_directory}
$ yarn add --dev ../gatsby-new-post-generator

動作確認

newpostでの記事生成前

$ tree content/blog/
content/blog/
├── Gatsbyでブログを作った
│   └── index.md
├── Ubuntu20.04でVisualStudioCodeがクラッシュする
│   └── index.md
├── 初めてnpmパッケージを公開した
│   └── index.md
└── 新規記事を作成するスクリプトを書いた
    └── index.md

以下のコマンドで新しい投稿を生成
$ yarn newpost HelloWorld!

$ tree content/blog/
content/blog/
├── Gatsbyでブログを作った
│   └── index.md
├── HelloWorld! //newpostコマンドで生成
│   └── index.md
├── Ubuntu20.04でVisualStudioCodeがクラッシュする
│   └── index.md
├── 初めてnpmパッケージを公開した
│   └── index.md
└── 新規記事を作成するスクリプトを書いた
    └── index.md

公開手順

npmjsのアカウントを作成する

ここからサインアップする
自分はnpmjs用のメールアドレスを新しく作成した。(スパムメール対策)

$ npm loginでログインする

公開する

公開したいパッケージのディレクトリへ移動する
$ cd ${npm_package_dir}
npmリポジトリへ公開
$ npm publish

学べたこと

npmとyarnはパッケージをインストールしたときの挙動が微妙に違うことがわかった。
今回のようにcli-toolとして利用したいとき、
yarnを利用すると、--devオプションを利用した場合でもyarn newpostのように利用できた。(開発関係依存として追加したプロジェクト内でスコープを限定できる)
しかし、npmの--save-devオプションで開発依存関係としてパッケージをインストールするとnpm run newpost、npm newpostのように利用することができなかった。
(グローバルインストール(-gオプション)すれば、bash aliasのようにnewpostで使用できるが、gatsbyの記事生成で利用するだけなので適当でない)

所感

npmパッケージはインストールして利用するだけで、作成するのは今回が初めてだった。
そもそもこのような形でまとめるのも初めてで、とても大変だった。
しかし、やってみると今まで曖昧にしてきた部分を調べ直したりしたので、良い学習になった。また、意外と手軽にnpmパッケージを作ることができることがわかり、良い経験になった。