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

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を再起動しましょう。

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

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

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