하루살이 개발일지

patch-package를 통해 node_modules 수정하기 본문

웹개발/JavaScript

patch-package를 통해 node_modules 수정하기

harusari 2023. 10. 25. 15:05

1. patch-package 란?

patch-package는 자바스크립트 프로젝트에서 node_modules를 수정할 수 있게 해주는 라이브러리이다.
이를 통해 node_modules 내부에서 수정하고 싶은 부분이 있다면, 변경 사항을 패치 파일로 저장하고 git 업로드 등을 통해 쉽게 공유할 수 있게 해 준다.

 


2. 언제 필요한가

특정 패키지 내부 버그 수정이 필요할 때 해당 패키지가 새로운 공식 릴리즈가 되는 것을 기다릴 필요 없이 즉시 직접 수정하고 싶을 때, 혹은 프로젝트에서의 특별한 요구 사항으로 패키지를 수정하고 싶은 경우 등에 유용하다.

 


3. 사용 방법

3.1. patch-package 설치

// yarn
yarn add patch-package postinstall-postinstall

// npm
npm i patch-package postinstall-postinstall

postinstall-postinstall 은 패키지 설치 후 자동으로 패치를 적용하기 위한 추가 스크립트이다.

 

3.2. 패키지 수정

node_modules에서 변경이 필요한 부분을 직접 수정한다.

예시로, 현재 나의 node_modules의 expo 폴더에서 AppEntry.js라는 파일을 다음과 같이 수정해 보겠다.

 

 

 

3.3. 패치 생성

수정 사항을 저장한 후, 변경 사항을 패치 파일로 만드는 과정이 필요하다.

터미널에 다음과 같은 명령어를 입력한다.

npx patch-package (패키지 이름)

이 명령은 프로젝트 루트 경로에 'patches' 폴더를 생성하고, 변경 사항에 대한 패치 파일을 저장한다.

 

patches 폴더 내부 생성된 패치 파일

 

 

3.4. 자동 패치 설정

프로젝트를 사용하는 다른 사람들이 npm install 또는 yarn을 실행할 때 패치가 자동으로 설정되도록 하는 과정이 필요하다.

이를 위해 package.json에 postinstall 스크립트를 추가해 준다.

"scripts": {
  "postinstall": "patch-package"
}

 

 

3.5. 변경사항을 github에 push

위 과정이 완료되었다면 변경사항을 github에 commit & push 한 후 팀원들에게 공유한다.

 


4. 적용 확인

patch-package가 잘 실행되는지 확인하는 과정이다.

 

4.1. node_modules 삭제

rm -rf node_modules

node_modules 폴더를 날려버린다.

 

 

4.2. npm i 로 재설치

npm i

yarn

npm i 혹은 yarn 명령어를 통해 node_modules를 재설치한다.

 

 

4.3. 설치된 node_modules 에 변경사항이 잘 적용되는 지 확인

 

 

변경사항이 잘 적용되어 설치되는 모습이 확인되면, 성공이다.

 


레퍼런스

https://www.npmjs.com/package/patch-package

https://velog.io/@goodenough/patch-package-%EC%98%A4%ED%94%88%EC%86%8C%EC%8A%A4-%EB%9D%BC%EC%9D%B4%EB%B8%8C%EB%9F%AC%EB%A6%AC-%EA%B0%84%EB%8B%A8%ED%95%98%EA%B2%8C-%EC%BB%A4%EC%8A%A4%ED%85%80%ED%95%98%EA%B8%B0