pnpm patch를 사용해서 노드 모듈 수정하기 (patch-package 에러 발생 😭)

종종 오픈소스 코드를 수정해야할 경우가 있다.

node_modules에 들어가 해당 라이브러리를 직접 수정하는데 이렇게 하면 설치하고 수정한 해당 로컬 프로젝트에서만 유효하고, 동일한 수정사항을 다른 환경에서 반영하기 쉽지 않다.

 

이럴때, patch-package라는 라이브러리를 통해서 해당 수정사항을 저장하고 post install을 통해 설치 후 자동으로 반영하게 할 수 있다 👍

 

그런데, pnpm을 사용하는 프로젝트에서 patch-package를 사용하면 에러가 발생한다.

 

package-lock.json, npm-shrinkwrap.json, or yarn.lock

위에 세개만 찾을 수 있다고 하는데, pnpm-lock.yaml은 지원하지 않는 것 같다.

 

https://github.com/ds300/patch-package/issues/413

Does not support pnpm · Issue #413 · ds300/patch-package

 

하지만 딱히 걱정할 필요는 없다.

 

pnpm은 비슷한 기능을 내장하고 있기 때문이다.

 

https://pnpm.io/cli/patch

pnpm patch <pkg> | pnpm

 

pnpm patch가 그 기능인데, 사용 방법도 그렇게 복잡하지 않고 써볼만 하다.

 

 

사용법을 간단하게 작성해보자면, 일단 다음 명령어를 사용한다.

pnpm patch <패키지 이름>

 

이 명령을 실행하면, 지정한 패키지가 임시 디렉토리에 복사되어 수정할 수 있는 상태가 된다.

 

임시 폴더로 .pnpm_patches 폴더가 생성되는데, 해당 폴더 내부의 입력한 패키지가 복사되어 있다.

이제 그 패키지에서 필요한 수정사항을 바꿔주자 (수정할 코드는 새로 생긴 임시 폴더 내부의 복사된 패키지이다) ✨

 

그리고 patch를 했을 때 나오는 로그를 참조해서 경로를 넣어 patch-commit을 해준다.

 

pnpm patch-commit

 

그러면 변경 사항이 반영되고, 프로젝트 최상단에 patches 폴더가 생기고, 내부에 수정사항이 저장된다.

또한 package.json과 pnpm-lock이 수정되어 해당 patches가 pnpm install 시 반영될 수 있도록 자동으로 설정이 된다 😎

 

+++ yarn 도 비슷한 기능이 있다 (이 쪽이 더 먼저 생긴듯)

yarn patch 👍

 

https://yarnpkg.com/cli/patch

yarn patch | Yarn