pnpm의 속도에 대해서 들어봤다면 얼마나 빠르기에?라는 생각이 들 것이다. npm을 사용하고 있다면 pnpm을 사용할 수 있기 때문에 설치해서 사용하는 것을 추천한다.
1. pnpm 설치하기
1) npm이 설치되어 있는 경우(Node.js)
npm install -g pnpm
전역적으로 하여 pnpm을 설치할 수 있다. 그리고 나서 터미널을 껐다가 키는 것을 추천한다.
만약 코드를 통해서 설치했는데 설치가 잘 안된다면 공식문서에 들어가면 다른 설치 방법이 있으니 이를 참고하여 설치하는 것을 추천한다.
2) PowerShell로 설치하기
Installation | pnpm
Installation | pnpm
Prerequisites
pnpm.io
powershell로 설치하려고 하니 계속 V3가 악성코드라고 막았다. 그래서 파일 경로를 확인하여 아래에 있는 참고사이트를 참고하였다. V3에 설정에 검사 예외 설정이라는 곳이 있다. 위에서 파일 경로를 본 것을 파일 추가 버튼을 클릭하여 추가해준다. 그러면 위의 문제가 해결되면서 아래와 같이 나오면 설치에 성공한 것이다.
위와 마찬가지로 설치후에 터미널을 껐다가 다시 트는 것을 추천한다.
2. 기존 node_modules 삭제하기
npx npkill
위의 코드를 작성하고 나면 진짜로 진행해요?라고 나오는데 y를 넣어 진행해준다. 나의 경우에 백엔드와 프론트 둘 다 존재하여 두개의 폴더가 뜬다. 삭제하고 싶은 폴더만 스페이스 바를 눌러 삭제를 진행해준다.
삭제가 다 진행되면 아래와 같이 맨 앞에 [DELETED]라고 뜬다. 그리고 나서 ctrl + c 를 눌러 빠져 나온다.
추가) 추가적으로 내가 위의 겪으면서 이상한 글이 나온다. ~ narrow~이러면서 나오는데 터미널이 창이 좁으니까, 좁아서 진행못한다는 뜻이므로 전체창으로 띄워서 진행하면 된다. 내 경우 사이트를 보면서 진행하느라 왼쪽에는 인터넷 창, 오른쪽에는 vscode를 띄워서 진행해 해당 에러가 나왔다.
3. package.json 수정
"scripts": {
"preinstall": "npx only-allow pnpm",
...
}
package.json에 들어가서 script부분에 위와 같이 추가해준다.
4. pnpm-workspace.yaml 만들기
pnpm-workspace.yaml 파일을 만든다. 그리고 나서 포함하거나 제외할 디렉토리를 작성해준다. 나의 경우 잘 몰라서 아래만 추가해주었다.
packages:
# all packages in direct subdirs of packages/
- 'packages/*'
# all packages in subdirs of components/
- 'components/**'
# exclude packages that are inside test directories
- '!**/test/**'
5. pnpm import
pnpm import
pnpm import를 진행해준다. 그러면, package-lock.json 기반으로 pnpm-lock.yaml 파일이 생성된다.
6. package_lock.json 파일 삭제
rm ./package-lock.json
위의 코드를 작성하여 프로젝트 디렉토리의 package-lock.json파일을 삭제한다. 더 이상 필요없기 때문에 삭제한다.
7. 의존성 설치
pnpm i
pnpm를 통해서 의존성을 설치해준다. 그러면 node_modules가 생성된다.
8. 프로젝트 돌리기
pnpm run dev
내 프로젝트의 경우 npm run dev로 해서 프로젝트를 돌렸다. 내 기준으로 프로젝트를 돌리는 것이니 보시는 분들은 본인위주로 pnpm ~식으로 해서 프로젝트를 실행시켜주세요!
마지막으로 프로젝트가 잘 돌아가는지 확인해보니, 이전보다 확실히 속도가 빠름을 확인할 수 있었다.
