corepack, pnpm, vite 사용해보기

corepack 소개

기본 개념

corepack은 node v16.9.0, v14.19.0부터 기본 포함된 실험적 기능으로 yarn, pnpm 같은 package manager를 프로젝트별로 지정하여 사용할 수 있게 한다.
(yarn 개발자가 만들었다고 함.)

https://nodejs.org/dist/latest-v16.x/docs/api/corepack.html

Corepack | Node.js v16.15.1 Documentation

사용자가 global corepack을 사용하고 프로젝트의 package.json에서 package manager와 version을 지정해두면 지정된 package manager의 버전을 사용하고 다른 package manager를 사용할 수 없게 할 수 있다고 한다.

사용 활성화

corepack을 사용하고 싶은 경우 다음과 같이 활성화 명령을 사용한다. (관리자 권한이 필요)

corepack enable

사용 예

corepack이 활성화된 상태에서 프로젝트의 package.json에 다음과 같이 설정되어 있으면

{
    "packageManager": "yarn@2.4.3"
}

해당 프로젝트에서 yarn command를 사용하면 지정된 버전의 yarn을 설치하고 실행한다.

$ yarn -v
2.4.3

 

만약 package manager가 다음과 같이 npm으로 지정되어 있는 프로젝트에서

{
    "packageManager": "npm@7.11.2" 
}

yarn을 사용하면 다음과 같이 에러가 발생한다.

$ yarn 
Usage Error: This project is configured to use npm

npm 관리 설정

현재 corepack의 default 설정은 yarn과 pnpm이 관리 대상이고 npm은 대상이 아니다.

따라서 package manager가 yarn으로 설정된 프로젝트에서 npm 명령을 사용해도 오류가 발생하지 않는다고 한다.

npm도 버전을 관리하고 싶은 경우 다음과 같이 설정한다.

$ corepack enable npm

default version 설정

프로젝트에 package manager에 대한 지정이 없는 경우 사용할 default version을 다음과 같이 설정할 수 있다.

corepack prepare yarn@1.22.19 --activate

위와 같이 설정된 경우 package manager에 대한 지정이 없는 프로젝트에서 yarn을 사용하면 coerpack에 설정된 버전의 yarn을 사용한다.

pnpm의 경우도 마찬가지이다.

corepack prepare pnpm@7.3.0 --activate

pnpm 소개

기존의 package manager들

npm을 사용하는 경우 해당 프로젝트의 node_modules 폴더에 dependency들을 설치한다.

이는 yarn도 동일하다고 한다. (yarn은 직접 사용해 본 적이 없음.)

yarn의 경우 설치 프로세스의 속도를 높이기 위해 작업을 병렬화 하여 npm보다 빠르다고 한다.

그 밖에도 여러 개선들이 추가되어 현재 버전 2.x까지 나왔고 많은 사람들이 사용하고 있다고 한다.

pnpm

pnpm의 경우 설치 시 해당 프로젝트 별로 설치하는 게 아니라 content-addressable store라는 곳에 저장을 하고 각 프로젝트에선 심볼릭 링크로 가져다 사용한다.

따라서 프로젝트가 아무리 많아져도 효율적으로 dependency를 관리할 수 있다.

자바 개발을 하는 경우 maven repository처럼 공통 관리한다고 생각하면 될 것 같다.

다만 maven의 .m2 와는 저장 형태는 다르다.

pnpm의 경우 한글 문서도 있다.

npm과 명령어가 그의 같아서 npm 쓰는 것처럼 사용하면 되는 듯하다.

https://pnpm.io/ko/

Fast, disk space efficient package manager | pnpm

vite 사용해보기

앞서 corepack, pnpm을 소개했는데 vite를 사용하려고 보니 선택지가 있어서 찾아보았다.

vite로 프로젝트를 만들어보기 전에 pnpm을 사용하기 위해 corepack을 활성해해 두었다.

vite도 한글 문서가 있어서 편하게 따라 해 볼 수 있다.

https://vitejs-kr.github.io/guide/

시작하기 | Vite

가이드 문서대로 pnpm으로 프로젝트를 생성해보았다.

pnpm create vite

그런데 아래와 같은 오류가 발생했다.

C:\Users\bluesky\Downloads>pnpm create vite
 ERROR  No package.json (or package.yaml, or package.json5) was found in "C:\Users\bluesky\Downloads".

pnpm의 버전을 확인해보니 6.11.0이었다.

C:\Users\bluesky\Downloads>pnpm -v
6.11.0

관련된 버그는 6.16에서 수정된 것 같다.

https://github.com/pnpm/pnpm/issues/3728

corepack의 default pnpm 버전을 더 위 버전으로 지정하고 다시 프로젝트를 생성하면 해당 오류가 해결된다.

C:\Users\bluesky\Downloads>corepack prepare pnpm@7.3.0 --activate
Preparing pnpm@7.3.0 for immediate activation...

예전에 vue cli로 생성할 때보다 선택 항목이 많이 줄어들었다.

프로젝트 이름을 지정하고

사용할 라이브러리를 선택하고

typescript를 사용할 건지 묻는다.

그러면 프로젝트가 만들어지고 이후 해야 할 일을 안내해준다.

내 경우 bluesky-project-front라는 이름으로 svelte, typescript 사용으로 만들어보았다.

이제 해당 프로젝트로 이동하고 install을 한다.

install을 하면 생성된 package.json의 dependency들을 node_modules 폴더에 설치한다.

C:\Users\bluesky\Downloads\bluesky-project-front>pnpm install
Packages: +89
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
Packages are hard linked from the content-addressable store to the virtual store.
  Content-addressable store is at: C:\Users\bluesky\AppData\Local\pnpm\store\v3
  Virtual store is at:             node_modules/.pnpm
Downloading registry.npmjs.org/typescript/4.7.4: 11.7 MB/11.7 MB, done
Progress: resolved 109, reused 1, downloaded 88, added 89, done
node_modules/.pnpm/svelte-preprocess@4.10.7_lvfi2wesz6u4l5rfbnetbucfmm/node_modules/svelte-preprocess: Running postinstanode_modules/.pnpm/svelte-preprocess@4.10.7_lvfi2wesz6u4l5rfbnetbucfmm/node_modules/svelte-preprocess: Running postinstall script, done in 14ms
node_modules/.pnpm/esbuild@0.14.47/node_modules/esbuild: Running postinstall script, done in 1.4s

devDependencies:
+ @sveltejs/vite-plugin-svelte 1.0.0-next.49
+ @tsconfig/svelte 2.0.1 (3.0.0 is available)
+ svelte 3.48.0
+ svelte-check 2.7.2
+ svelte-preprocess 4.10.7
+ tslib 2.4.0
+ typescript 4.7.4
+ vite 2.9.12

pnpm을 사용하는 경우 실제 저장은 Content-addressable store위치에 하고 node_modules에는 심볼릭 링크가 걸려있다.

visual studo code를 실행하고

C:\Users\bluesky\Downloads\bluesky-project-front>code .

개발용 서버를 실행해서

C:\Users\bluesky\Downloads\bluesky-project-front>pnpm run dev

  vite v2.9.12 dev server running at:

  > Local: http://localhost:3000/
  > Network: use `--host` to expose

  ready in 261ms.

브라우저에 해당 주소를 띄운 후 IDE에서 파일을 수정하면 바로바로 반영되는 걸 확인할 수 있다.

Awesome vite소개

vite를 사용할 때 기본 제공하는 설정 외에도 다양한 template을 사용할 수 있다.

어떤 template들이 있는지 한 곳에 모아 소개를 하고 있다.

https://github.com/vitejs/awesome-vite#templates

npx degit을 사용하여 쓸 수 있는데 npx는 임시로 설치해서 실행하는 용도의 명령어이고 degit은 git repository를 손쉽게 복사하는 명령어이다.

npx는 node에 기본 포함이고 degit은 추가로 설치하면 된다.

npm install -g degit

https://github.com/Rich-Harris/degit

다음과 같이 사용하면 된다.

npx degit user/project my-project
cd my-project

npm install
npm run dev

위에서 user/project는 github의 https://github.com/user/repo를 를 의미한다. 

해당 repository의 template을 가져와 my-project로 만들어준다.