[Yarn Berry] yarn berry 프로젝트에서 자꾸만 node_modules가 나타나는 이유 (with. Vite)

공부한 내용을 정리한 글입니다 
내용에 오류가 있거나 더 좋은 의견이 있다면 댓글로 남겨주세요.
배움에 큰 도움이 됩니다. 🖋

 

 

Yarn berry를 사용하는 프로젝트에 자꾸만 node_modules가 나타나는 이유 (with. Vite)

---

지금 작업하는 프로젝트의 빌드 도구는 Vite, 패키지 매니저로는 Yarn Berry가 세팅되어 있다.

Yarn Berry를 사용하는 프로젝트에서 아래와 같이 설정하면 PnP(Plug'n'Play) 방식으로 의존성을 관리할 수 있는데, PnP는 프로젝트에 쓰이는 패키지를 가상 파일 시스템에 저장하고 필요할 때 프로젝트 코드에서 자동으로 로드하는 방식이다.
우리가 익히 알고 있는 node_modules 폴더를 생성하는 대신 의존성은 .pnp.cjs 파일을 통해 관리하고, 의존성 정보는 yarn/cache 폴더에 저장하는 것이다.

 

 

.yarnrc.yml

 

nodeLinker: pnp

yarnPath: .yarn/releases/yarn-3.6.1.cjs

 

 

 

그런데 작업 후 코드를 점검하던 중 node_modules 폴더를 발견했다.
오.. 분명 pnp 방식을 사용하면 node_modules 폴더가 생기지 않는다고 했는데 이상했다. 궁금했으나 시간이 늦었기에 조금 찾아보다 node_modules를 지우고 풀리퀘를 했다.

 

다음 날이 되었다. 여느 때와 다름없이 작업을 하고 코드를 점검하던 중 또 다시 node_modules 폴더를 발견했다. '어제 지웠는데..?'

이럴수가. 이번엔 조금 무서웠다.

 

구글링을 하다보니 나와 같은 이슈를 겪으신 분이 있었다. 결론적으로 말하면 패키지 매니저 뿐 아니라 빌드 도구 Vite에서도 해당 폴더를 기본값으로 사용하고 있기 때문에 생긴 이슈였다. Vite에서는 성능 향상을 위해 트랜스파일링 된 패키지를 캐싱하는데, 그 캐싱 디렉토리의 기본 루트가 node_modules였던 것이다.

 

 

 

 

따라서 Vite 설정 파일에서 캐시 저장 경로를 바꾸는 간단한 작업으로 이슈를 해결할 수 있었다.

그 뒤로 node_modules는 더 이상 볼 수 없었다.

 

 

vite.config.ts

 

export default defineConfig({
  ...
  
  cacheDir: './.yarn/.vite',

});

 

 

 

 

 

참고

---

https://ahnanne.tistory.com/95

vite + yarn berry(pnp) 사용할 때 node_modules가 생긴다!?