npm에서 pmpm으로 마이그레이션 하기

저번 글에서는 npm 대신 pnpm이 왜 npm 보다 더 많이 사용되는지 이유와, 장/단점에 대해서 알아보았는데요. 이번에는 기존에 npm으로 만들어진 프로토 타입을 pnpm으로 마이그레이션 하는 과정을 공유해보고자 합니다.

 

마이그레이션 순서는 아래와 같습니다.

1.  npm에서 pnpm으로 마이그레이션 하기 위해서는 기존의 npm 파일을 제거해야 합니다.

아래의 파일들을 삭제해 주세요.

• `package-lock.json`
• `node_modules` 디렉토리 삭제

또는

`rm -rf node_modules package-lock.json` 을 통해 삭제해 주세요.

 

2. pnpm 설정 파일을 생성합니다.

• pnpm-workspace.yaml 모노레포 워크 스페이스 구조를 정의합니다.

packages:
    - packages/*
  onlyBuiltDependencies:
    - '@parcel/watcher'
    - esbuild

• .npmrc 관련 설정을 추가합니다.

  auto-install-peers=true
  strict-peer-dependencies=false
  shamefully-hoist=false
  prefer-workspace-packages=true

 

.npmrc 파일에 추가된 pnpm 설정에 대해서 설명하자면 아래와 같습니다.

1. `auto-install-peers=true`
   - 이 설정은 패키지를 설치할 때, 해당 패키지의 peerDependencies를 자동으로 설치하도록 해 의존성 충돌을 줄일 수 있게 처리합니다.
2. `strict-peer-dependencies=false`
   - 이 설정이 `false` 라면 peer dependencies가 충족되지 않더라도 설치가 중단되지 않습니다. 개발 중에 모든 peerDependencies를 충족하지 않아도 설치를 진행할 수 있어 유연성을 제공합니다. 하지만 이로 인해 런타임 에러가 발생할 수 있으므로 주의가 필요합니다.
3. `shamefully-hoist=false`
   - 이 설정이 `false`로 설정되면 pnpm은 node_modules 구조를 최대한 평평하게 만들지 않고, 각 패키지의 의존성을 개별적으로 관리합니다. 의존성 충돌을 방지하고 각 패키지가 독립적으로 관리될 수 있도록 하여 모듈 간의 의존성 충돌을 줄일 수 있습니다.
4. `prefer-workspace-packages=true`
   - 이 설정이 `true`로 설정되면, pnpm은 외부 레지스트리에서 패키지를 설치하기 전에 워크스페이스 내의 패키지를 우선적으로 사용합니다. 모노레포 환경에서 패키지 간의 의존성을 효율적으로 관리할 수 있게 되며 로컬 환경에서 개발 중인 패키지를 쉽게 테스트할 수 있습니다.

3. package.json 수정 및 pnpm 설정 파일로 대체

2번에서 설명했듯이 npm의 워크 스페이스 설정을 제거하고, pnpm의 설정 파일로 대체합니다. 보통 npm에서 프로젝트를 관리할 때 package.json 파일에 워크스페이스를 추가하여 여러 패키지를 관리합니다.

 

일반적으로 다음과 같아요.

{
  "workspaces": [
    "packages/*"
  ]
}

이 설정은 package 디렉토리 아래에 있는 모든 패키지를 워크스페이스로 인식하게 합니다.

 

pnpm은 npm과 다르게 워크스페이스 설정을 pnpm-workspace.yaml 파일을 통해 관리합니다. 이 파일은 프로젝트의 루트에 위치해야 하고 다음과 같은 형식으로 설정됩니다.

packages:
  - packages/*

 

이 설정은 npm의 workspace설정과 동일한 역할을 하며, packages 디렉토리 아래의 모든 패키지를 워크스페이스로 인식합니다.

 

4. 의존성 설치

pnpm을 사용하여 모든 의존성을 설치합니다. 이 과정에서 빌드 스크립트도 승인해야 합니다.

• `pnpm install`
• `pnpm approve-builds`

 

5. 끝으로 개발 서버를 실행하여 마이그레이션이 성공적으로 완료되었는지 확인합니다.

• `pnpm dev`