패키지 매니저 비교 (npm vs yarn vs pnpm)

https://www.atatus.com/

 

 

이 글에서 사용되는 yarn은 yarn berry를 지칭합니다.  

해당 글은 공부하면서 계속 내용이 추가됩니다. (다른 비교 글에서 주로 다루지 않은 주제 먼저 다룹니다.)

 

 

1. peer dependencies

 

1) 동작방식

npm/pnpm은 비슷하고 yarn은 완전 다르게 동작한다.  
npm
yarn

npm 하고 pnpm은 A라는 패키지를 설치했을 때   peerDependencies에 리스트되어있는 패키지가 설치되어있지 않으면 자동으로 peerDependencies를 설치해준다.   (npm은 v7 부터 ) 

 

하지만 yarn은 자동으로 설치해주지 않고 경고만 한다.  

예시로 `react-dom`의 `peerDependencies`는 `react`이다  
따라서 `react`를 설치하지 않고 `react-dom`을 설치하면 아래처럼 경고해준다.

 

여기서 조심할 점이 있다. 위 이미지에 있는 경고를 보고 패키지를 설치하면  peerDependencies 의 semver에 상관없이 최신 버전이 설치된다.  만약 우리가 설치한 패키지가 해당 패키지의 peerDependencies에 리스트되어있는 패키지의 최신버전과 호환되지 않는다면  오류가 발생한다. 참고 예시

따라서 `yarn`을 패키지 매니저로 사용한다면 peerDependencies에 리스트되어있는 패키지의 semver를 확인하고 알맞은 버전을 설치하는게 안전하다.

예를 들어보자 
예제 : sentry-capacitor/package.json   (링크)
`yarn add @sentry/capacitor@0.9.0` 를  입력할 때 아래와 같이`@sentry/capacitor@0.9.0`의 `peerDependencies`에 리스트되어있는 모든 패키지가 설치되지 않았다고 가정해보자  만약 `npm`과 `pnpm`을 패키지매니저로 사용한다면  `@capacitor/core`를 최신버전으로 설치하고 나머지`@sentry/angular`, `@sentry/react`,`@sentry/vue` 는 peerDependenciesMeta가 적용되어 있어서 자동으로 설치되지 않는다. 여기서 만약  이 패키지들을 직접 설치한다면 peerDependencies에 있는 버전에 맞게 알아서 설치해준다. 하지만  `yarn`은  다르게 동작한다.  먼저 `yarn`은 `@capacitor/core`가 설치되지 않았다고 경고해준다.  또한 `@sentry/angular`, `@sentry/react`,`@sentry/vue`를 직접 설치한다면 다른 패키지들과 다르게 `peerDependencies에 리스트되어있는 버전으로 설치되는 것이아니라 최신버전으로 설치가 된다.  
이는 호환성 오류를 유발할 수도 있다.  

"peerDependencies": {
    "@capacitor/core": ">=3.0.0",
    "@sentry/angular": "7.8.1",
    "@sentry/react": "7.8.1",
    "@sentry/vue": "7.8.1"
},
"peerDependenciesMeta": {
    "@sentry/angular": {
      "optional": true
    },
    "@sentry/react": {
      "optional": true
    },
    "@sentry/vue": {
      "optional": true
    }
},

 

2) peerDependencies 확인방법 

1. npm

peerDependencies를 포함해서 보여준다.  (단 `peerDependenciesMeta`가 적용되어있으면 표시해준다) (공식 문서)
default 값이 최상위 종속성만 표시해서 --all 을 사용하거나 --depth를 사용해야 다 보인다 

npm ls --all

 

2. pnpm

특이점은 `peerDependencies`는 옆에 `peer`로 표시된다 ( 공식 문서 )

pnpm ls --depth Infinity

3. yarn

npm/pnpm과 다르게 yarn은 명령어가 다르다  (관련 Issues 링크1 ) (관련 공식문서 링크 2)

yarn info --all

Peer dependencies도 같이 보고 싶으면 아래처럼 해주면된다.  

yarn info --virtuals

 

 

 

(직접 실험 해보실분은 여기서 하시면 됩니다.)

yarn에서는 peerDependencies를 사용하면 dependencies에도 같이 입력해줘야한다.  (관련 링크)

 

 

 

 

 

 

2. peerDependenciesMeta

 

왜? peerDependenciesMeta가 필요했을 까?

 

사용법은 npm, pnpm, yarn 모두 같다

peerDependenciesMeta가 필요한 이유는  peerDependencies에 리스트되어있는 패키지를 설치하지 않았을 시 경고 메시지를 유발하지 않기 위해서이다.  즉 peerDependencies이지만 필수가 아니라 설치되지 않았다고 경고를 띄우지 않기 위해서이다. 

peerDependenciesMeta를 사용하면 npm과 pnpm은 peerDependencies와 peerDependenciesMeta 두 개 모두에 리스트된 패키지는 자동으로 설치하지 않는다.  yarn에서는 peerDependencies의 해당 패키지를 설치하라고 경고 메시지를 띄우지 않는다.  

 

사용법 1

{
  "name": "tea-latte",
  "version": "1.3.5",
  "peerDependencies": {
    "tea": "2.x",
    "soy-milk": "1.2"
  },
  "peerDependenciesMeta": {
    "soy-milk": {
      "optional": true
    }
  }
}

 

 

사용법 2

이 방법은 yarn에서만 공식적으로 확인되었다. 

{
  "name": "tea-latte",
  "version": "1.3.5",
  "peerDependencies": {
    "tea": "2.x",
  },
  "peerDependenciesMeta": {
    "soy-milk": {
      "optional": true
    }
  }
}

 

위 코드는 아래 코드와 같은 의미이다. 

{
  "name": "tea-latte",
  "version": "1.3.5",
  "peerDependencies": {
    "tea": "2.x",
    "soy-milk": "*"
  },
  "peerDependenciesMeta": {
    "soy-milk": {
      "optional": true
    }
  }
}

 

 

 

1) npm

npm은 v7 부터 peerDependenciesMeta를 지원하기 시작했다. (공식 문서) 

 

 

2) pnpm, 

pnpm은 v3.2.0-1 부터 지원한다. 

 

3) yarn 

yarn은 v1.13 부터  지원한다. 

 

---

next.js 

pnpm  

yarn 사용하다 pnpm으로 변경

 

링크 :https://github.com/vercel/next.js/pull/37259

Update to leverage pnpm for monorepo by ijjk · Pull Request #37259 · vercel/next.js