自作npmパッケージをローカルでバックする。

先日react-ts-github-calendarというgithub-calendarのReact + TypeScript対応のコンポーネントを作成して公開しました。
作成を通して、デバックで手間取った部分があったので共有します。

そもそもローカルでデバック(擬似的にインポートする)するにはどうするの？

package.jsonのあるルートディレクトリで、

$ npm pack

することで(パッケージ名).tgzが生成されます。
そしてパッケージを使いたいプロジェクトで

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

します。(この際yarnにキャッシュが残り、ファイルの中身を編集したのに変更が反映されない現象が起きるので注意。詳しくは次)
package.jsonと.tgzファイルが同じ階層にあれば

$ yarn add ./（パッケージ名）.tgz

すると
package.jsonに追加されます。

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

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

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

注意
デバックの段階で

$ npm publish

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

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

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

• パッケージ名を変える
• パッケージのバージョンを上げる。
  といった方法がありますがキャッシュを消すのが早いでしょう。