at backyard

Color my life with the chaos of trouble.

scoped modulesを用いたパッケージをnpmで公開したときに得た知見

目次

scoped modulesについて

npmでは名前は早い物順だが 、scoped modulesであれば @ユーザ名/パッケージ名 といった形になるので、名前が他の人が作ったパッケージ名と衝突することはなくなる。

日本語の記事だとこちらにわかりやすく詳細が書かれているので、scoped modulesについて知りたい方は下記を見てみると良い。

efcl.info

npmモジュールでscoped modulesを用いるとき

上のリンクにも書かれている内容であり、内容も上のものと変わらないのだが、自身が実際がnpmにリリースしたモジュールにscoped modulesを適用したときのことを備忘録がてら書いていく。

なお、scoped modulesとしてリリースする上で行うことは2つだけで、手順も簡単。

実際にリリースしたモジュールは下記であり、TypeScriptでlocalStorageのmockを書いてみようと思い、作成したものだ。

github.com

1. パッケージ名は@ユーザ名/パッケージ名とする

package.json 内の name@ユーザ名/パッケージ名 とつける。

私はnpm initを行った後に、手動でpackage.jsonを書き換えたが、npm init --scope=<npmユーザ名>とコマンドを打って初期化する方法でも良いらしい。

上に貼ったリポジトリの場合、下記のような表記となっている

{
  "name": "@shinshin86/local-storage-mock",
  ・
  ・
}

2. publishConfigの設定を行う

scoped modulesとして作ってnpmで公開する場合、npmへのpublish時に npm publish --access=public と明示的にリリースする必要があるらしい。
(デフォルトでは --access=restricted となっているため明示的に publicにする。またこれが必要なのは最初のリリース時のみらしい。)

ただ、このようなオプションを付けなくても package.json内に下記の設定を加えることで同様の設定を行うことが可能なので、私は package.json につける形で設定した。

{
  ・
  ・
  "publishConfig": {
    "access": "public"
  },
  ・
  ・
}

scoped modulesでnpmにリリースを行ったときに気をつけること

scoped modulesに関するnpmへの公開方法は以上となる。

ここからはこのscoped modulesをインストールする際に意識することについて書いていく。

scoped modulesをインストールした際のディレクトリ構造について

scoped modules でリリースしたパッケージをインストールする場合、下記のように実行する必要がある。

npm i @ユーザ名/パッケージ名
yarn add @ユーザ名/パッケージ名

そしてインストールされたモジュールは node_modules/ユーザ名/パッケージ名というディレクトリ構造でインストールされる。

また、パッケージを呼び込む際には下記のようにする必要がある。

require('@ユーザ名/パッケージ名');

scoped modulesとして公開しているが、利用するときには@をつけないで利用したい (aliasインストールを使用する)

scoped modulesとして公開した場合でも、利用するときには@をつけないで、通常(という表現が適切かはわからないが)のnpmパッケージと同じように利用したいという場合、下記のようにインストールすることで実現が可能。

npm i パッケージ名@npm:@ユーザ名/パッケージ名
yarn add パッケージ名@npm:@ユーザ名/パッケージ名

このように パッケージ名@npm:@ユーザ名/パッケージ名 という形でインストールすることで、@ユーザ名 はつけずにパッケージ名だけで利用することができる。

勿論パッケージの読み込みも下記のように利用可能だ。

require('パッケージ名');

これはについては下記のドキュメントに記載がある

npm-install | npm Docs

私はscoped modulesのパッケージで @ を記載せずに使用するためにaliasを利用したが、aliasの用途としては他にも、

  • 同じ名前のパッケージの複数のバージョンを並べて使用
  • 長い名前のパッケージのインポート名を短くして利用しやすくする
  • forks されたパッケージや fork された npm パッケージを代替品として利用

などのような利用ケースが想定される。

以上、scoped modulesを用いたパッケージをnpmで公開したときの備忘録でした。

localStorageのmockをTypeScriptで作りました。

上にも書いたがTypeScriptでlocalStorageのmockを使ってみようという気持ちから、下記のパッケージを作ってみた。

github.com

完全にlocalStorageの動き(というかStorageか)を再現できているわけではないが(※)、基本的なロジックは実装している。

※完全に再現できていない、というのは想定していない値を渡したときの返り値部分については再現していないということだ。mockとして利用する上では、ここは無視しても良さそうかと思ったのでここについては完全には再現していない。

ちなみに先にも書いたが scoped modules でリリースしているので、下記のようにインストールすることで、 require('local-storage-mock') とユーザ名をタイプせずに利用できるようになる。

npm install local-storage-mock@npm:@shinshin86/local-storage-mock
# or
yarn add local-storage-mock@npm:@shinshin86/local-storage-mock