2020-12-10
react-ts-github-calendarの作成を通して、つまったところを共有。
今回は自作のnpmパッケージのローカルデバックについて。
随時更新。
$ 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時間以内でないと削除できません。すぎるとサポートに連絡しないといけなくなります。また、未完成のコードを配布してしまうことになり、単純に迷惑なのでやめましょう。
対処法:
$ 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を再起動しましょう。
他にも、とにかくファイル名が変われば良いので、
といった方法がありますがキャッシュを消すのが早いでしょう。