pnpm 도입 및 명령어

개요

회사에서 진행할 새로운 프로젝트의 기술 스택을 고민하면서, 패키지 매니저도 알아보았다.
2주 만에 뭔가가 나와야 하는 상황이라 자세히 리서치할 기회는 없었지만, 짧은 시간 동안 PNPM에 대해 파악한 내용과 회사 프로젝트에 도입한 경험을 잊지 않고 공유하려 기록한다.

pnpm이란

PNPM은 npm을 대체할 수 있는 javscript package managers 중 하나다. Vue 3, SvelteKit, Prisma, Vite 와 같은 많은 사이트에서 PNPM을 사용한다. Vue 에코시스템에서 많이 사용한다고 한다.¹

• NPM보다 훨씬 빠른 패키지 설치 시간을 제공한다 (50% 이상까지)
• NPM보다 중복 패키지 관련 적은 파일 디스크를 사용한다.
  • 다른 프로젝트에서 중복된 패키지를 사용한다면 심링크와 캐시를 이용해 같은 파일 디스크를 사용한다. 매번 프로젝트별로 패키지들을 설치하는 NPM과 다르다.
  • node_modules 크기가 현저히 작다.
• NPM과 거의 똑같은 CLI를 제공한다.
  • npm run local하던 것을 pnpm run local하면 된다.

이외에도 다양한 이점이 있다.²

cheat sheet

npm	pnpm	Description
npm install	pnpm i / pnpm install	package.json에 명시된 패키지들 설치
npm install {pkg name}	pnpm add {pkg name}	dependencies에 저장
npm install {pkg name} --save-dev	pnpm add -D {pkg name}	devDependencies에 저장
npm run {script}	pnpm run {script}	npm run serve -> pnpm run serve
npm outdated	pnpm outdated

이외에도 명령어 부분은 pnpm 공식 사이트에 자세히 설명되어 있다.³

설정

쓰는 법은 간단하다. 우선 pnpm을 설치한다. 설치하는 방법은 이 공식 문서[ https://pnpm.io/installation]에 다양하게 나와 있다. 나는 npm을 사용해 설치했다.

npm install -g pnpm

이외에 내가 설정한 부분이 있는데 필수는 아니다. 패키지 설치 시 pnpm만 사용하도록 package.json에 명시했다.

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

끝이다. pnpm install로 패키지를 설치하면 된다.
NPM이 packages-lock.json을 만든다면, pnpm은 pnpm-lock.yaml을 생성한다. packages-lock.json을 git commit 하는 것처럼, pnpm-lock.yaml을 commit해서 같은 리포를 사용하는 개발자들이 같은 패키지 셋업을 사용할 수 있도록 한다.

npm에서 pnpm으로 migrate 하는 법

기존 npm project를 pnpm 으로 이전하는 방법을 설명한다.⁴

1. pnpm을 설치한다.
2. 기존 node_modules를 삭제한다.

   npx npkill
   

3. (옵션)package.json에 "preinstall": "npx only-allow pnpm", 추가한다. (위 설정 섹션과 동일)
4. (옵션)package.json에 workspaces가 있다면(필자는 없어서 해당 사항 아니었음), pnpm-workspace.yaml을 생성한다

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

5. (옵션)package.json에 있는 불필요한 "workspaces"부분을 지운다.
6. 기존 packages-lock.json을 활용해 pnpm-lock.yaml을 만들기 위해 다음 명령어를 실행한다.

   pnpm import
   

7. packages-lock.json을 지운다.
8. dependencies를 설치한다.

   pnpm i
   

도입

도입한 이유

사실 프로젝트 진행하는데 시간이 부족해서 원래 쓰던 NPM을 사용하려 했다. 기존 프로젝트는 NPM으로 다 진행했기 때문에, 다른 시간을 들이지 않고 바로 진행할 수 있었다. 이뿐만 아니라 npm은 제일 많이 쓰이고, default 패키지 매니저이기 때문에 신뢰할 수 있기 때문이다. npm으로 로컬 환경도 구성해 놓고 개발하던 상황이었다. 그래도 뭔가 미련이 남아서 출근길에 알아보니, pnpm이 기존 npm ecosystem 호환되게 만들었다는 걸 알게 되었다. file disk 덜 사용하고, 설치할 때 parallel로 설치 가능하다는 점에서 매력적이었고, 사실 PNPM 공식 웹사이트에 설득당해서 한번 로컬에 써보자 생각이 들었다. 혼자 로컬에 해보고 생각보다 시간 공수가 든다고 하면 개인 프로젝트에만 써볼 생각이었다. 직접 로컬에 해봤는데, npm에서 migrate해도 문제없이 바로 사용할 수 있었다.

사실 pnpm말고도 package managers는 NPM, Yarn 등 여러 가지 옵션이 있다. 리서치해 봤을 때 요즘 yarn3( pnp & zero installs)와 pnpm을 많이 사용했다.⁵ yarn3 (pnp & zero installs)도 시간이 있었다면 실험해 보고 싶었지만, pnpm보다 시간 투자를 더 해야 할 것 같았고, 전에 다른 팀 프로젝트를 통해 yarn을 사용했었을 때 캐싱 오류가 계속 나서 불편한 경험이 있었다 (많은 사람이 yarn3 찬양하는 거 보면, 내가 yarn을 모르는 상태에서 사용해서 일어난 일인것 같다). yarn berry보다 npm에서 migrate할 때도 문제가 없을 것 같았고, 파트원들도 쉽게 사용할 수 있을 것 같았다. 여러 가지 상황을 고려했을 때 PNPM을 사용하기로 했다.

개인적인 pnpm 경험

현재 기준(2023년 06월 11일) 아직 PNPM을 도입하고 제대로 배포를 해본 상황은 아니다. 로컬 환경 개발 시 dependencies(node modules) 설치할 때만 사용해 보았다. 아직 프로젝트 초기라 설치할 라이브러리도 많지는 않지만, 확실히 NPM보다 설치 속도가 빠르다. 배포 시에도 패키지 설치 시간이 훨씬 줄을 거라 예상한다.

npm에서 migrate 했을 때도 문제 없이 바로 잘 사용할 수 있었다. 아직은 정말 잘 쓰고 있다. 혹시 문제가 생긴다면 이 글을 업데이트할 예정이다.

도입을 고민하면서 찾아본 페이지들

• Yarn 대신 pnpm으로 넘어간 3가지 이유
• JavaScript Package Managers: NPM Vs YARN Vs PNPM
• npm -> pnpm가면서 생긴 이슈

References

1. medium: why you should move to pnpm ↩

2. pnpm: motivation ↩

3. pnpm: cli - add ↩

4. yarn/npm to pnpm migration guide ↩

5. reddit: Yarn vs NPM vs Others in 2023 ↩