npm workspace로 모노레포 구축하기

📍참고

https://docs.npmjs.com/cli/v9/using-npm/workspaces?v=true 

workspaces | npm Docs

 

📍환경 체크

NPM 버전 확인

npm --version
9.6.3 # 230403 현재 최신버전

 

NPM을 최신 버전으로 업데이트하기

npm install npm@latest -g

 

📍Workspace 란?

✅단일 최상위 루트 패키지 내에서 로컬 파일 시스템의 여러 패키지 관리를 지원하는 npm cli의 기능 집합을 지칭

 

예) 최상위 package.json 이 하위 폴더의 package.json을 관리하고 보조

Workspace

├ package.json

├ view

│  └ package.json

├ server

│  └ package.json

...

 

장점

- 하위 프로젝트의 바로가기를 node_modules (루트에 단일하게 존재) 하위에 만들고 모듈처럼 사용 가능

- 하위 프로젝트 들이 사용하는 의존성을 중복없이 하나로 사용 가능

 

📍workspaces 정의하기

✅1. 루트의 package.json 에 workspace 프로퍼티를 추가하고 하위 패키지경로 입력

예) 루트(.) 의 package.json

{
  "name": "my-workspaces-powered-project",
  "workspaces": [
    "packages/view",
    "packages/server",
  ]
}

 

루트 디렉토리 (.) 의 하위 패키지 view의 루트는 packages 폴더 내에 생성된다

 

✅2. npm init

- packages 내에 view 하위 패키지를 workspace로 생성

-y 붙이기 가능 

npm init -w ./packages/view

- packages/view 폴더가 루트의 node_modules 폴더에 바로가기 처럼 연결된다

- workspace 끼리 모듈을 공유할 수 있다!

바로가기 생성

 

 

실행 결과

. # 루트
+-- node_modules
|  `-- view -> ../packages/view # ./packages/view 의 바로가기
+-- package-lock.json
+-- package.json
`-- packages
   +-- view # 하위 패키지
   |   `-- package.json

 

 

 

📍Workspace에 의존성 추가하기

✅workspace에 직접 의존성을 추가/삭제/업데이트할 수 있다

- workspace config에서 기본값 변경도 가능

 

아래와 같은 구조가 있을 때

.
+-- package.json
`-- packages
   +-- view
   |   `-- package.json
   `-- server
       `-- package.json

 

workspace view 에 등록되는 abbrev 패키지를 설치한다고 하면, 아래 명령어를 실행한다

npm install abbrev -w view

 

- abbrev 패키지는 루트의 node_modules에 설치되며, 하위 패키지에서 참조할 수있다

- uninstall, ci 같은 다른 명령어도 workspace config를 활용할 수 있다

 

참고 - workspace config

https://docs.npmjs.com/cli/v9/using-npm/config#workspace

config | npm Docs

 

📍workspace 사용하기

✅workspace에서는 패키지들끼리 모듈을 공유할 수 있다

 

루트 패키지에서 하위 패키지의 모듈을 사용

 

./packages/view/index.js

module.exports = "이것은view의상수"

 

./index.js

const module1 = require("view");
console.log(module1); // 이것은view의상수

 

마찬가지로 하위 패키지들도 모듈을 공유할 수 있다 (server - view)