npm link를 이용하여 서드파티 npm 패키지 커스터마이징

npm link를 이용하여 로컬에서 서드파티 npm 패키지를 커스터마이징하는 방법을 알아봅시다.

nodejs + npm

npm link란?

때때로 로컬에 존재하는 다른 프로젝트를 npm 패키지처럼 쓰고 싶은 경우가 있었을 것입니다.

npm link기능을 사용하면 특정 패키지가 다른 프로젝트의 node_modules에 존재하는 것처럼 사용할 수 있습니다.

이를 이용하여 npm dev를 활용한 핫 리로딩 기능을 활용할 수도 있겠죠.

---

npm link의 마법

여기서부터는 참고 2의 번역입니다.

 

Node.js에는 매우 간단한 모듈 로딩 전략이 있습니다.
모듈을 require()할 때마다 다음 단계가 순서대로 실행됩니다.

1. 노드 코어(core) 모듈인 경우 코어 모듈을 로드합니다.
2. 상대 경로인 경우 상대 경로에서 모듈을 로드합니다.
3. ./node_modules 디렉토리에서 모듈을 찾습니다.
   • 만약 해당 디렉토리에 없으면, 파일 시스템의 루트에 도달할 때까지 상위 디렉토리의 ./node_modules에서 재귀적으로 검색합니다.

참고:

NODE_PATH 환경 변수를 지정하여 Node.js가 다른 폴더의 모듈을 검색하도록 할 수 있지만 권장되지는 않습니다.(not recommended)

---

로컬 모듈 로딩하기

npm link 명령은 컴퓨터의 어느 곳에서나 모듈을 로드할 수 있기 때문에 특별합니다.

다음은 예입니다.

1. 컴퓨터에 npm 모듈을 생성(또는 다운로드)합니다.

cd ~/Desktop
git clone git@github.com:klughammer/node-randomstring.git

2. 모듈의 루트 폴더 내에서 npm 링크를 실행합니다.

cd ~/Desktop/node-randomstring
npm link

3. 다른 디렉터리에서 npm link <module_name>을 실행합니다.

mkdir ~/Desktop/my-project
cd ~/Desktop/my-project
npm link randomstring

4. 이제 프로젝트 내에서 2에서 링크한 모듈을 require할 수 있습니다.

# ~/Desktop/my-project/app.js

const randomstring = require("randomstring");
console.log(randomstring.generate());

npm 링크의 멋진 점은 필수 모듈에서 변경한 사항이 프로젝트에 즉시 반영된다는 것입니다.

예를 들어, generate() 함수를 약간 덜 유용한(less useful one) 함수로 교체해 보겠습니다.

# ~/Desktop/node-randomstring/lib/randomstring

exports.generate = function(){
  return 4; // chosen by fair dice roll.
            // guaranteed to be random.
}

앱을 다시 실행하면 4라는 결과가 표시됩니다.

로컬 모듈을 로드할 수 있다는 것은 필요한 모듈을 변경하고 publish / install 주기를 거치지 않고
프로젝트 컨텍스트에서 즉시 테스트하려는 경우 정말 유용합니다.

---

해당 기능은 어떻게 동작하나요?

npm link가 Node의 모듈 로딩 전략을 회피하는 마법처럼 보일 수 있지만

사실 특별한 것은 없습니다.

npm link는 두 개의 심볼릭 링크를 생성합니다.

 

1. 글로벌 심볼릭 링크

모듈의 루트 디렉토리에서 npm link를 실행하면
npm은 "global node_modules" 디렉토리에서 -> 로컬 모듈의 디렉토리로 심볼릭 링크를 생성합니다.

“global node_modules” 디렉토리는
npm install -g로 설치된 모든 모듈이 저장되는 특수 디렉토리입니다.
npm root -g를 실행하여 전역 node_modules 디렉토리의 경로를 찾을 수 있습니다.

다음을 실행하여 생성된 symlink를 볼 수 있습니다.

> ls -al $(npm root -g)
lrwxrwxrwx  1 alexishevia alexishevia   43 Mar 22 21:19 
randomstring -> /home/alexishevia/Desktop/node-randomstring

2. 로컬 심볼릭 링크

프로젝트 디렉토리에서 npm link <module_name>을 실행하면
npm이 ./node_modules/<module_name>에서

<global_node_modules>/<module_name>으로의 심볼릭 링크를 생성합니다.

 

다음을 실행하여 생성된 symlink를 볼 수 있습니다.

> ls -al ./node_modules
lrwxrwxrwx 1 alexishevia alexishevia   64 Mar 22 21:19 
randomstring -> ../../../.nvm/versions/node/v6.9.5/lib/node_modules/randomstring

저는 nvm을 사용하고 있으므로
전역 node_modules 폴더는 /home/alexishevia/.nvm/versions/node/v6.9.5/lib/node_modules입니다.

 

이게 전부입니다.
마술이 아니라 심볼릭 링크입니다.

 

보너스

심볼릭 링크를 제거하기만 하면 npn link의 효과를 "취소"할 수 있습니다.
그러나 npm unlink라는 내장 명령이 있습니다.

 

(주의 : 순서 중요)

먼저 프로젝트 디렉토리에서 npm unlink --no-save <module_name>을 실행하여 로컬 symlink를 제거하고

모듈의 디렉토리에서 npm unlink를 실행하여 전역 symlink를 제거하세요

---

참고

https://medium.com/dailyjs/how-to-use-npm-link-7375b6219557

How to use npm-link

https://medium.com/@alexishevia/the-magic-behind-npm-link-d94dcb3a81af

The magic behind npm link