togami2864のゴミ箱

npmパッケージ開発 ローカルデバック編

2020-12-10

react-ts-github-calendarの作成を通して、つまったところを共有。
今回は自作のnpmパッケージのローカルデバックについて。
随時更新。

1.どうすればいいの?

$ npm pack

で(パッケージ名).tgzというファイルが作成されます。

そしてパッケージを使いたいプロジェクトのルートディレクトリで

$ yarn add  (.tgzファイルまでのパス)

します。(yarn or npmのキャッシュが残っていると変更が反映されません。詳しくは2.で)

package.jsonと.tgzファイルが同じ階層にあれば

./(パッケージ名).tgz

でOKです。

すると

package.jsonに追加されます。

これで例えばReactコンポーネントであれば

import {~~~~} from ~~~~

のようにいつもどおり使えます。

*注意
デバックの段階で

$ npm publish

で一度npmにあげてからimportして試すのはやめましょう。(一度やってしまいました。)
npmパッケージはpublishから72時間以内でないと削除できません。すぎるとサポートに連絡しないといけなくなります。また、未完成のコードを配布してしまうことになり、単純に迷惑なのでやめましょう。


2.何度 yarn add ./(パッケージ名).tgz しても変更が反映されてない!

対処法:

$ yarn cache clear  // キャッシュ 全削除
or
$ yarn cache clean (パッケージ名)

でキャッシュを削除しましょう。
完全に初見でハマりました。

.tgzファイルを展開するとpackageというファイルがでてきます。
以下react-ts-github-calendarの例

package
├── LICENSE.txt
├── README.md
├── dist
│   ├── react-ts-github-calendar.d.ts
│   └── react-ts-github-calendar.js
└── package.json

ここのファイルの中身を見ると、たしかに変更が反映されているのですが、

$ yarn add  (.tgzファイルまでのパス)

をした後、node_modules内のパッケージを見ると変更が反映されていませんでした。

どうやら全く同じ名前のファイルをaddしていたので、キャッシュが働いてしまって反映されていなかったようです。時々キャッシュを消した状態でもnode_moduleへの反映が遅れていることがあるので、IDEを再起動しましょう。

他にも、とにかくファイル名が変われば良いので、

  • パッケージ名を変える
  • パッケージのバージョンを上げる。

といった方法がありますがキャッシュを消すのが早いでしょう。