[node.js] patch-package 활용

React를 사용하면서 당연 장점은 여러가지의 package를 쉽게 npm, yarn 을 이용해서 가져올 수 있다는 것이다.

하지만 아무래도 open source의 package들이 많다 보니 packag.json을 사용하고 막상 import 하고나면 node_modules안에 있는 프로젝드들을 조금 수정하거나 디버깅 하고 싶은 경우가 많이 생긴다.

수정을 하기위해 node_modules 안에서 직접적으로 수정을 하면 안좋은 일들이 일어나게 되는데..

🤬 node_modules 안에서 직접적으로 수정하면 생기는 일

• 로컬에서는 괜찮지만, 다른 환경에서 사용할 때 다시 node_modules를 수정해야한다.
• 업데이트가 될 때 yarn 을 사용하게 되는데, 이 때 수정 파일들을 다 덮어 버린다
• 다른 개발자나 CI 환경에서 공유할 때 골치 아프다.

🥶 그렇다면 방법은 patch-package.

1. node_modules 안에 수정한 코드들을 /patches 아래에 저장한다
2. /patches 안에 있는 "patch" 들을 node_modules에 바로 적용한다.

😰 patch-package 단점은?

1. 결국, 언젠가는 버전 관리가 필요한 package 이기 때문에, 새로운 버전으로 업데이트시 자기가 수정한 patch가 정상적으로 작동되는지 매번 확인해야한다.
2. .patch, /patches 등 새로운 폴더 및 파일이 생성되기 때문에 불필요한 용량을 차지한다.
3. patch-package postinstall과 같은 추가적인 installation이 필요한 번거로움이 있다.
4. 음... 다시 한 번 언급하는것이 좋을것 같다. 추가적인 버젼 관리가 필요하다.

🚀 Installation

npm i patch-package
yarn add -D patch-package postinstall-postinstall

👨🏻‍💻 사용 방법

1. package.json 안에 postinstall 칸에 patch-package를 넣어줌으로서, 모든 파일들이 npm 으로 다운된 후 patch-package를 확인한다.

// package.json
"scripts": {
	"postinstall": "patch-package"    // 경우에 따라 preinstall
}

2. node_modules 안에 있는 패키지를 지금 수정해보자

node_module
	 └── @package... 수정!

3. 수정한 node_module 안 패키지를 patch-package를 이용하여 로컬 환경에 패키지화 시킨다.

yarn patch-package [package-name]

4. 생성된 로컬상의 package를 git을 이용하여 공유시킨다 🎉

git add patches/[...patch]
git commit -m [commit message goes here]