サムネイル
2022-04-02
2023-06-22
npm

はじめて npm で制作物を公開するということをしてみたので、その手順のメモ。

 前提

  • プロジェクトはGit管理している
  • node js 及び npm をインストールしている

今回 publish してみたのは RADIX という、自分が自分の為に作っているCSSフレームワーク&JSライブラリ。
RADIXについては今いろいろ作ってる途中なので、落ち着いたらまたなんか書く。

公開

1) npm のアカウント作成

https://www.npmjs.com/ にアクセスしてアカウントを作成する。

そしたらコマンドラインから

npm adduser

で先ほど作成したアカウントのユーザ情報を入力してログインできるようにしておく。

2)package.jsonの作成

すでにgit でプロジェクトを管理している前提なので、git のセットアップについては省略。
プロジェクトのディレクトリに入って

npm init

で対話的に package.json が作れる。プロジェクトの名前やバージョン、githubのレポジトリ等の情報を入力すると下のようなファイルが作成される。

{
  "name": "radix-library",
  "version": "4.0.0",
  "description": "CSS and Javascript library to initialize pages.",
  "main": "radix.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/7304sk/radix.git"
  },
  "author": "shoalwave <shoalwave.dev@gmail.com> (https://shoalwave.net/)",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/7304sk/radix/issues"
  },
  "homepage": "https://radix.shoalwave.net/"
}

バージョンがいきなり 4.0.0 なのは、npm管理を始める前から更新していたプロジェクトで4にメジャーアップデートをするタイミングで今回やってみたからなので気にしない。

バージョンは必ず {major}.{minor}.{patch} と3段階で設定する。

別の話になりますが、github上でソフトウェアを公開するときは必ずライセンスをつけましょうね。npm で公開するということは他者にダウンロード・利用をしてもらおうということなので、ライセンスなしではできません。

3.5).npmignore の設定

これは必須の工程じゃないが、.npmignore を作ると npm publish に含めないディレクトリを設定できる。
本体として不必要なフォルダがあったら指定する(RADIXの場合、 icons ディレクトリは不要)。

4)公開

あとは公開するだけ。必要なファイルを git commit が完了していないとできないので、公開前に git の更新をする。
注意点として、

  • プロジェクト名は npm上に重複していると、「そのプロジェクトに対して publish する権限がない」として rejectされる(radixだとされたので、radix-libraryに変えた)。npm init のときはこのチェックはしてくれないので自分で既存チェックをしよう。非常に酷似したname も受け付けてもらえない (radix-libraryがあるから radix_library にするとか)ので注意。
npm publish

をしてエラーが出なければ公開に成功している。npmのマイページに行けば package が追加されているはず。

適当なプロジェクトを作って、

npm install {your_package_name}

とパッケージ名でインストールをしてみればできるはず。自分のRADIXの場合、CDNで公開したいがために npm publish したので、そちらで見れるか確認する。

UNPKG は npm で公開されているパッケージを全てCDNとして配信してくれている。自分が使ってるやつだと Swiper JS とかがこれを使って配信している。

https://unpkg.com/radix-library@4.0.0/

という風に、パッケージ名@バージョン でアクセスしてみて、ページが返ってきたら無事に公開に成功。

更新

バージョンアップ

すでに publish 済みのパッケージをバージョンアップさせる場合、

npm version major

minor, patch のバージョンを上げる場合は version の後をそれぞれにする。
npm version を実行したあと package.json を見るとバージョンがあがっているはず。

また、git でも package.json の変更が勝手に commit されている上、その commit 後の内容で v{major}.{minor}.{patch} というタグが勝手に作られている(タグのpush まではしてくれないので、レポジトリへの push は自分で)。

更新内容に問題がなければ npm publish を実行すれば、前のバージョンに加えて新しいバージョンが latest として公開され、npm install で入るのは基本的にその最新版となる。

公開済みのバージョンを取り消したいとき

npm unpublish {your_package_name}@{version}

なお unpublish は72時間以内にしかできない。unpublish の後に何も書かなければ全てのバージョンが対象になる。