Makes the current local package accessible system-wide, or in another location.
로컬 패키지를 다른 장소에서 사용할 수 있도록 도와주는 방법이다.
이번 프로젝트(B)는 디자인 시스템을 사용하는 레포지토리 A 그리고 이것을 이용해서 구성하게 됐다. 하지만 디자인 시스템 또한 같이 버그테스트와 함께 진행하고 있어 사내 nexus(npm registry)가 아닌 로컬 레포지토리를 바라봐야하는 환경이라 사용하게 됐다.
├── design-system
| ├── packages/react/main/package.json
├── repo-B
├── apps/
│ ├── web/
[pnpm link](https://pnpm.io/cli/link)
```bash
-> design-system/packages/react/main: pnpm link --global
-> repo-B/apps/web: pnpm link --global @design-system/reactdesign-system에는 react 말고도 다양한 플랫폼을 제공하고 있어서 react/main/package.json이 현재 사용하고자 하는 패키지고 패키지 이름은 @design-system/react 만을 install & import 하여 사용하려 합니다.
우선 세 가지 방법으로 연결할 수 있습니다. 세 가지 방법 중 한가지만 적용하면 됩니다.
- repo-B/apps/web$ pnpm link ../../../../design-system/packages/react/main
- design-system/packages/react/main$ pnpm link --dir ../../../repo-B/apps/web
- design-system/packages/react/main$ pnpm link --global && repo-B/apps/web: pnpm link --global design-system/react
저는 --global 을 이용해 global node_modules에 저장해두고 언제든지 취소하고 연결할 수 있도록 3번을 이용했고 취소하고 싶을 땐 pnpm install을 이용해서 다시 다운로드 받고, 다시 link를 이용하고 싶으면 repo-B/apps/web: pnpm link --global design-system/react 을 이용하여 다시 연결하였습니다.
import 하는 부분에 마우스 커서를 올리면 기존에 nexus에서 다운 받을 땐 아래와 같이 나왔지만
module "/repo-B/node_modules/.pnpm/design-system+react@1.0.1_...pnpm link 했을 때는 아래와 같이 로컬 경로를 확인할 수 있었습니다.
module "/design-system/packages/react/main/dist/src/index"
이전에 yarn link를 하다 궁금했던 내용이 공식 문서에 나와있어서 같이 소개하자면, pnpm link와 file: 프로토콜을 이용하는 방법은 뭐가 다를까요?
'pnpm link'를 사용하면 연결된 패키지가 소스 코드에서 심볼릭 링크됩니다. 연결된 패키지의 소스 코드를 수정하면 변경 사항이 프로젝트에 반영됩니다. 이 방법을 사용하면 pnpm은 링크된 패키지의 종속성을 설치하지 않으므로 소스 코드에서 수동으로 설치해야 합니다. 이는 연결된 패키지에 대해 특정 패키지 관리자를 사용해야 할 때 유용할 수 있습니다. 예를 들어 연결된 패키지에는 'npm'을 사용하고 프로젝트에는 pnpm을 사용하려는 경우가 있습니다.
dependencies에서 file: 프로토콜을 사용하면 연결된 패키지가 프로젝트 node_modules에 하드링크되고, 연결된 패키지의 소스 코드를 수정할 수 있으며 변경사항이 프로젝트에 반영됩니다. 이 방법을 사용하면 pnpm은 연결된 패키지의 'node_modules'를 재정의하여 연결된 패키지의 종속성도 설치합니다.
peer dependencies를 처리할 때는 file: 프로토콜을 사용하는 것이 좋습니다. 프로젝트 종속성에서 피어 종속성을 더 잘 해결하여 연결된 종속성이 기본 프로젝트에 지정된 종속성 버전을 올바르게 사용하도록 보장하여 보다 일관되고 예상되는 동작을 이끌어냅니다.
| Feature | pnpm link | file: Protocol |
| Symlink/Hard-link | Symlink | Hard-link |
| Reflects source code modifications | Yes | Yes |
| Installs dependencies of the linked package | No (manual installation required) | Yes (overrides node_modules of the linked package) |
| Use different package manager for dependency | Possible (e.g., use npm for linked pkg) | No, it will use pnpm |
