[patch-package] 오픈소스 라이브러리 간단하게 커스텀하기

patch-package 를 이용하면 노드모듈속 라이브러리를 커스텀한 상태가 배포상태에서도 지속되도록 수정사항을 기억해뒀다가 배포시 노드모듈 위에 덮어 씌워준다.

다시 말해 node_modules에 수정한 사항이 git으로 관리되고 어떠한 실행 환경에서도 적용되도록 한다.

라이브러리 자체에 버그가 있어서 신속한 수정이 필요하다거나 라이브러리에서 지원하지 않는 기능을 추가하고 싶을때 사용하면 안전하게 수정사항을 공유할 수 있다.

적용방법

patch-package 공식 사이트의 가이드라인에 따라 패치를 진행했다.

set-up

package.json > scripts 에 "postinstall": "patch-package" 추가

설치명령어

npm i patch-package

Usage

npm 패키지 코드 수정

패치 파일 생성

npx patch-package (antd, 수정하고 싶은 라이브러리)

로컬의 변경 사항을 바탕으로 패치 파일이 생성된다.

patches 라는 폴더가 생성되고 수정사항이 저장된 것을 확인

node_modules 안의 특정 package(나의 경우에는 antD)의 수정사항이 patches 폴더안에 patch 파일로 자동 저장된다.

node_modules 전부 지우고 재설치해도 해당 변경사항이 적용되는지 확인

node_modules 삭제

rm -rf node_modules

npm 재설치

npm i

npm 삭제 후 재설치한 이후에도 patches 폴더안에 patch 파일이 node_modules에 적용되어 수정사항이 반영되는 것을 확인할 수 있다.

npm run build 로 빌드단계에서 에러가 일어나지 않는지 확인

git push

생성된 패치 파일을 git 저장소에 추가한다.

유의할점(단점) - 에러발생 가능성

로컬에서 빌드시 에러가 생기지 않았는데 우리 프로젝트에서 프론트엔드 빌드를 위해 사용하는 vercel 에서 patch-package를 이용한 노드모듈 덮어쓰기가 허용되지 않는 에러가 생겼다. 인스톨된 버전과 patch 된 버전이 달라서 오는 에러이다.
patch 된 버전과 package.json에 저장된 버전을 확인하고 수동으로 맞춰서 다시 push 했더니 에러가 발생하지 않았다.


이처럼 patch-package를 사용할 시 매번 버전이 달라질 때마다 patch 파일의 버전을 인스톨 되어 있는 버전과 맞춰줘야 하는 단점이 있다. 그러나 이러한 단점이 있음에도 빠르고 간편하게 노드모듈속 라이브러리를 수정 배포할 수 있다는 점에서 알아두면 좋은 대처법 중의 하나인 것 같다.