npm link 이해하기

현재나는 my-app 패키지에서 개발을 하고 있고, some-dep 패키지를 yarn add 커맨드를 통해서 설치했다고 해보자. 근데, 이 some-dep에서 버그가 발생했다. 이런 상황에서 node_modules에 있는 some-dep에 직접 들어가서 버그를 고친다음에 테스트를 하면 일시적으로 잘 되긴 할 것 이다. 근데 저 some-dep 패키지를 다시 설치하게 되면 내가 수정한부분이 삭제되기 때문에 버그를 고치고 커밋을 한 뒤, some-dep git repository에 push를 해야한다.(내 패키지가 아니라면 PR을 날려야한다.)

 

이런 과정들이 매우 귀찮기 때문에 우리는 다른 방법을 찾아야한다. 바로 npm link이다.

 

Symbolic Link(심볼릭 링크, 바로가기 파일)

줄여서 Symlink라고 부른다. 한마디로 바로가기 파일이라고 생각하면 된다.

// some-dep으로 이동
npm link  # global symlink 생성됨.

// my-app으로 이동
npm link some-dep  # 위에서 생성된 some-dep의 global symlink를 my-app에서 사용하겠다.

패키지 연결 과정은 다음 두 단계를 거쳐 일어난다.

 

1. npm link 명령어를 입력해서 global symlink를 만든다.
-> 우리가 npm install -g [패키지명] 명령어를 통해서 패키지를 설치하면 윈도우의 경우 C드라이브 경로에 설치되는걸 경험한적 있을것이다. 그곳이 바로 npm의 글로벌 모듈들이 설치되는 폴더인데, 그곳이 global symlink가 생성되는 곳이다.

 

2. 그 다음에 my-app 패키지에서 위에서 만들어준 global symlink를 npm link some-dep 명령어로 실행하게 되면 my-app에서 some-dep을 사용할 수 있게 된다.

즉, my-app에 yarn add로 some-dep을 설치하는 느낌이 아니라 my-app과 some-dep을 각각 컴퓨터에 다운로드 받고 두개의 파일을 서로 바로가기로 연결한 느낌이다.

이걸 그림으로 살펴보면 이렇다.

초록색 화살표로 연결된 심볼릭 링크들

 

먼저 some-dep으로 이동해서 npm link를 입력하는 순간 {global folder}/node_modules/에 some-dep의 global symlink가 생성된다.(1번과정)

 

그다음, my-app으로 이동해서 npm link some-dep을 입력하면 global folder에 있는 some-dep을 현재 내 패키지에 심볼릭 링크로 연결하겠다는 의미가 된다.(2번과정) 

 

이제 my-app과 some-dep은 심볼릭 링크로 서로 연결되어 있기 떄문에 some-dep을 수정하게 되어도 my-app에서 수정된 some-dep의 내용을 참조할 수 있게 되었다. 이렇게 서로 다른 두 패키지간의 로컬 연결은 글로벌 폴더를 경유한 두가지 과정을 거쳐서 일어나게 되는것이다. 심볼릭 링크는 로컬 컴퓨터에서만 유효하고 git에는 반영되지 않는다. 이렇게 로컬에서 심볼릭 링크로 some-dep을 테스트하고 수정한뒤, 완료되면 커밋하고 푸쉬하면 된다. 

 

작업이 끝났으면 원래대로 되돌리자.

my-app과 some-dep은 서로 연결되어 있다. some-dep의 버그 수정이 끝나고 push까지 완료된 상태라면 이제는 심볼릭링크를 제거해주어야 한다. 그때 사용하는 명령어는 다음과 같다.

 

// my-app으로 이동
npm unlink --no-save some-dep
npm uninstall --no-save some-dep

 

위 두개의 명령어는 같은 명령어이다. npm unlink는 npm link의 반대이니까 그냥 링크만 제거 해줄 것 같은데 사실은 그게 아니라 패키지 자체를 삭제해버린다. 이 명령어를 입력해주면 my-app의 node_modules에 연결되어 있던 some-dep에 대한 심볼릭링크가 삭제된다. 여기서 끝이 아니라, 우리는 아까 두개의 심볼릭 링크를 만들어줬으니까 이번엔 글로벌 심볼릭 링크도 같이 제거해줘야 한다.

 

// some-dep으로 이동
npm uninstall  # 글로벌 심볼릭 링크 삭제

 

결론

프로젝트를 하다가 어떤 라이브러리를 사용하게 됬는데 그 라이브러리가 현재 내 프로젝트와 충돌이 난다거나 버그가 발생했을때 npm link를 사용하면 될 것 같다. 우선 그 패키지를 clone받고 나서 그 패키지에서 npm link를 통해 글로벌 심링크를 만들고 내 패키지로 돌아와서 npm link [다운받은패키지]를 입력해주고 나서 라이브러리를 수정하면 될 것 같다. 수정이 완료 되면 그 커밋하고 PR을 날려서 머지되도록 해보자.

 

 

 

 

 

출처

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