자작 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를 다시 시작합시다.

그 밖에도, 어쨌든 파일명이 바뀌면 좋기 때문에,
  • 패키지 이름 바꾸기
  • 패키지 버전을 올립니다.
    같은 방법이 있지만 캐시를 지우는 것이 빠릅니다.
  • 좋은 웹페이지 즐겨찾기