patch-package 하는 법 npm package 커스텀 그리고 버그 픽스

patch-package

말그대로 npm 에 올려져 있는 모듈을 내가 커스텀하거나 버그 픽스를 해서 내 프로젝트에서 사용 하는 방법이다.

 

오픈 소스의 경우 버그를 고치고 PR를 통해서 해당 프로젝트에 기여하는 것도 좋다.

하지만 언제 프로젝트 오너가 머지 해줄지 모르기 때문에 급하게 버그를 고쳐서 사용하는 경우 patch-package를 통해서 커스텀해서 사용할수 있다.

 

patch-package - npm

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

보통 패치 패키지는 git diff 를 사용하는데 npm을 통한 모듈의 경우 node_modules 내부에 있고 node_modules는 git ignore되기 때문에 git diff를 통해서 변경점을 작성하기가 어렵다. 그를 자동으로 처리 해주는 라이브러리가 patch-package 이다.

 

patch-package는 node_modules 안의 수정사항이 Git으로 관리되고, 어떤 환경에서도 적용되도록 보장한다.

구체적으로는 다음의 두 역할을 한다.

1. node_modules 안의 특정 package의 수정사항을 patch 파일 형태로 patches 아래에 저장한다.
2. patches 안의 patch를 node_modules 안에 적용한다.

yarn을 기준으로 설치와 사용법은 다음과 같다.

patch-package와 postinstall-postinstall를 함께 dev로 설치한다.

 

yarn add -D patch-package postinstall-postinstall

package.json의 “scripts”에 다음과 같이 추가한다.

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

package 코드를 수정한 뒤에 아래 명령으로 patch를 만든다.

yarn patch-package package-name

 

생성된 patch를 commit한다.

git add patches/some-package+3.14.15.patch
git commit -m "fix brokenFile.js in some-package"

말그대로 3rd party 모듈의 패치를 만든 것이다. 사용하는 외부 모듈에 문제가 사소한 문제가 생겼을 경우 이런식으로 처리 해주는 게 가능하다. 해결한 이슈는 해당 모듈에 PR를 날리는 것이 좋다. 패치를 해결되기 어려운 혹은 수정 범위 광범위 하다면 다른 라이브러리를 찾거나 직접 구현해야 될수도 있다.

 

patch-package - npm 단점

아쉽게도 mono repo 처럼 node_modules 를 호이스팅해서 사용하는 경우에는 patch-package 가 package를 못찾는 경우가 있다. 그럴때는 수동으로 git diff 만들어 패치 파일을 만들고 수동으로 postinstall 해서 사용해야 된다.

 

3rd party 패키지를 수동으로 패치 커스텀 할때

 

1. 프로젝트 폴더 안에 patch 하고자 하는 파일을 복붙 한다.
   ( 보통 기본적으로 git에 ignore된 node_modules 안에 있기 때문에 )

$ git add .

1. 해당 파일을 staged 한다.
2. 변경하고자 하는 사항을 적용한다.
3. git diff 파일 생성

$ git diff 수정한파일 > /patches/모듈이름.patch

• 변경된 모듈 이름으로 작성 하고 파일명은 patch 로 한다.
• 생성된 git diff 파일 내부에 경로를 실제 node_modules 내부의 경로로 변경 한다.

예시 )

diff --git a/node_modules/react-native-image-selector/android/src/main/java/com/reactnativeimageselector/ImageSelectorModule.kt b/node_modules/react-native-image-selector/android/src/main/java/com/reactnativeimageselector/ImageSelectorModule.kt 
index fc6b5459d..3d11a916b 100644 
--- a/node_modules/react-native-image-selector/android/src/main/java/com/reactnativeimageselector/ImageSelectorModule.kt 
+++ b/node_modules/react-native-image-selector/android/src/main/java/com/reactnativeimageselector/ImageSelectorModule.kt 
@@ -174,6 +174,7 @@ class ImageSelectorModule(reactContext: ReactApplicationContext) : ReactContextB 
var _this = this 
val dialogBuilder = AlertDialog.Builder(it) 
.setTitle(title) 
+ .setCancelable(false)
.setItems(arrayOf(takePhotoButtonTitle, chooseFromLibraryButtonTitle)) { _, which -> if (which == 0) { this.checkCameraPermission()

"이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다."