개발관련/자바스크립트 팁

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

2021. 5. 27. 22:31
목차
  1. patch-package
  2. patch-package - npm
  3. patch-package - npm 단점
  4. 3rd party 패키지를 수동으로 패치 커스텀 할때
반응형

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()

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

반응형

'개발관련 > 자바스크립트 팁' 카테고리의 다른 글

자바스크립트로 색상값 명도 채도 변경 하기 how to change color's bright with javascript  (0) 2022.01.10
react-hook-form 사용 방법 1. 배열과 함께 사용 하기 useFieldArray  (0) 2021.11.22
ios 모바일 웹 롱프레스 복사 CSS만으로 방지  (0) 2021.05.13
모바일 웹 IOS Pull Down (잡아 당기기) css만으로 액션 방지 하기  (2) 2021.05.13
그래서 Top 이 어딘데? getBoundingClientRect().top element.offsetTop 차이점  (2) 2021.05.11
  1. patch-package
  2. patch-package - npm
  3. patch-package - npm 단점
  4. 3rd party 패키지를 수동으로 패치 커스텀 할때
"이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다."
개발자 Dane
개발자 Dane
IT / 테크 전문 크리에이터 데인 입니다.
개발자 Dane
개발자 Dane의 IT 전문 블로그
개발자 Dane
반응형
  • 분류 전체보기 (170)
    • 개발관련 (24)
      • 프론트엔드 지식 (11)
      • 매일 코딩 테스트 챌린지 (27)
      • 자바스크립트 팁 (32)
      • 리액트 (11)
    • 얼리어답터 (11)
    • 팁 (13)
    • 게임 (18)
      • 디아블로2레저렉션 (16)
    • 운동하는 후니 (2)
전체
오늘
어제

태그

  • vscode
  • 레저렉션
  • Next.js
  • 애플페이
  • javascript
  • 디아블로2레저렉션
  • 문자열정렬
  • 프로그래머스
  • gos
  • 코딩테스트
  • 디아블로2
  • 갤럭시소비자기만
  • 자바스크립트
  • s3
  • docker
  • AWS
  • GOS해제
  • 룬워드방패
  • 아이폰
  • 갤럭시긱벤치
  • 리액트
  • 바바리안
  • 문자열
  • 디아블로4
  • 갤럭시성능뻥튀기
  • yarn
  • React
  • PNP
  • Gatsby
  • 도커

최근 댓글

hELLO · Designed By 정상우.
개발자 Dane
patch-package 하는 법 npm package 커스텀 그리고 버그 픽스
상단으로

티스토리툴바

개인정보

  • 티스토리 홈
  • 포럼
  • 로그인

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.