npm/yarn에서 pnpm 마이그레이션 방법

npm or yarn to pnpm

npm의 여러 문제를 해결하고 drop-in replacement로 사용될 수 있는 pnpm으로 이주해보자.

pnpm의 장점은 이곳에 잘 나와있다.

설치환경

  • macOS
  • nvm: 노드 환경 관리를 위해 사용

마이그레이션 방법

1) nvm 설치

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.3/install.sh | bash
# nvmrc 파일 추가
echo "v20.3.0" > .nvmrc

# nvmrc 파일의 버전으로 node 설치
nvm install

# nvmrc 버전으로 PATH 수정
nvm use

2) nvm을 이용한 node 설치 및 PATH 설정

.nvmrc 파일이 있다면 nvm install을 입력했을 때 .nvmrc 파일에 있는 버전이 설치된다.

{
  "scripts": {
    "preinstall": "npx only-allow pnpm",
    ...
  }
  "packageManager": "pnpm@8.6.2"
}

3) package.json에 preinstall 스크립트 추가 및 packageManager 명시

실수로 npm 또는 yarn을 사용하더라도 preinstall에서 막히도록 preinstall 스크립트를 추가한다.

또한 packageManager를 명시해서 다음 단계에서 사용한다.

packageManager의 형식은 이름@버전(semver)를 정확히 써야 한다.

4) corepack을 사용한 pnpm 설치

corepack enable
corepack prepare --activate

corepack은 패키지매니저를 관리해주는 툴이며, nodejs의 experimental 기능이다

위 명령어를 입력하면 package.json에 명시된 packageManager를 다운로드하고 바이너리 경로가 조정된다

$ which node
/Users/vince/.nvm/versions/node/v20.3.0/bin/node
$ which pnpm
/Users/vince/.nvm/versions/node/v20.3.0/bin/pnpm

여기까지 완료했다면, node, pnpm의 경로가 이렇게 나올 것이다.

(Optional, 모노레포인 경우) pnpm-workspace.yaml 파일 추가

packages:
  # include packages in subfolders (e.g. apps/ and packages/)
  - "apps/**"
  - 'packages/**'
  # if required, exclude some directories
  - '!**/test/**'

모노레포라면 workspace 파일을 작성한다.

자세한 설명은 pnpm workspace 문서를 참고한다.

5) node_modules 제거

rm -rf node_modules

6) lock파일 import

pnpm import

위 명령어로 yarn.lock 또는 package-lock.json으로 pnpm-lock.yaml 파일을 생성한다.

7) 라이브러리 설치

pnpm install

여기까지 했다면 이제 pnpm만 쓰면 된다. 설치된 node_modules는 symlink로 연결되며, 웬만하면 잘 동작할 것이다.

pnpm CLI 명령어는 pnpm 홈페이지에 잘 나와 있다. 많이 쓰는 명령어는 아래와 같다.

  • pnpm add <pkg>: 패키지를 설치한다
    • pnpm add -D <pkg>: devDependencies에 추가한다
  • pnpm install: 프로젝트의 모든 디펜던시를 설치한다 (== pnpm i)
  • pnpm remove <pkg>: 패키지를 제거한다
  • pnpm prune: 사용되지 않는 패키지를 의존성에서 제거한다

package.json의 scripts 항목에 추가한 명령어들은 바로 pnpm 명령어로 실행하면 된다. (ex. pnpm build)

참고