Monorepo(모노레포) 프로젝트 구성하기 - Lerna, yarn workspace

Monorepo(모노레포)란?

Monolithic Repositories의 약자로, 여러 개의 프로젝트를 하나의 Repository에서 구성하는 것을 말한다. 보통은 하나의 Repository에 하나의 프로젝트를 생성하는데, 이런 구성은 Polyrepo 혹은 Multirepo라고 부른다.

Monorepo 사용 이유

1. 여러 프로젝트를 하나의 Repository로 관리할 수 있다.
2. Monorepo 내 여러 패키지에서 사용하는 공통 로직이 있을 경우 이 로직을 하나의 패키지로 분리하여 필요한 패키지에서 가져다 사용할 수 있다.
3. 중첩되는 모듈은 하나만 설치해서 사용할 수 있다.
   • Npm 방식만으로 프로젝트를 관리한다면, 전역 설치를 위해서 npm install -g 등의 명령어를 사용해야 한다.
   • 복잡한 프로젝트라면 중복되는 모듈을 찾기 어렵다.

Monorepo 단점

1. 특정 패키지가 특정 버전의 모듈을 사용하는 경우 다른 버전을 사용하는 다른 패키지와 충돌이 발생할 수 있다.
2. 여러 프로젝트를 하나의 Repository에서 관리하기 때문에 오히려 복잡해질 수 있다.

Monorepo 구성 방법

1. yarn workspace
2. Lerna

1. yarn workspace

1-1. yarn 초기화

yarn init -y
or
yarn init

1-2. workspaces를 지정해준다.

(package.json)

{
  "name": "project-name",
  "private": true, // workspaces는 배포하지 않겠다는 의미
  "version": "1.0.0",
  "license": "MIT",
  "workspaces": [
    "packages/*"
  ] // yarn workspace에서 관리할 패키지 경로
}

1-3. packages 디렉토리 생성

mkdir packages

1-4. packages에 각 프로젝트 생성

디렉토리 구조

    root
      ├ node_modules
      ├ packages
      │	├ project1
      │	│	└ package.json
      │	├ project2
      │	│	└ package.json
      │	└ project3
      │		└ package.json
      ├ package.json
      └ yarn.lock

⭐ yarn workspace에서 패키지 추가하기

yarn workspace에서 패키지를 추가하는 경우, yarn add [패키지이름]이 아닌 다른 방식을 사용해야 한다.

예제

• project1에 패키지를 추가하고 싶은 경우
  yarn workspace project1 add [패키지이름]

• project1에서 패키지를 삭제하고 싶은 경우
  yarn workspace project1 remove [패키지이름]

• 루트 디렉토리에 패키지를 추가하고 싶은 경우
  yarn add [패키지이름] -W

⭐ 패키지가 중복으로 설치되는 경우 호이스팅 된다.

yarn workspace project1 add react
yarn workspace project2 add react

위 명령어를 통해 project1, 2에 react를 중복으로 설치한다면 어떻게 될까?
이 경우 project1과 2 각각의 node_modules에 react 패키지가 추가되는 것이 아니라, 루트 경로의 node_modules에 추가된다.
중복(공통) 패키지는 루트 경로의 패키지로 호이스팅(상위로 끌어올려짐) 된다.

2. Lerna

Babel 개발자가 개발한 모노레포 관리 도구이다. Lerna는 Npm, Yarn보다 한단계 위에서 프로젝트를 관리한다.

2-1. 설치

npm install -g lerna
lerna init

or

npx lerna@latest init

2-2. lerna 세팅

설치가 끝나면 packages, lerna.json, package.json이 생성된다.

• /packages: 모노레포 구조에 속하는 프로젝트가 위치하는 폴더
• lerna.json: lerna 관련 설정
• package.json: root 경로에 생성된 package.json은 여러 프로젝트 내의 공통된 node_module 의존성을 관리해준다.

(lerna.json)

{
  "packages": ["packages/*"],
  "version": "independent",
  "npmClient": "yarn", // d
  "useWorkspaces": true
}

(package.json)

{
  "name": "root",
  "private": true,
  "devDependencies": {
    "lerna": "^4.0.0"
  }
}

2-3. 하위 프로젝트 생성

• 기본 패키지 구조 지정
  아래 명령어를 통해 packages 폴더 내에 프로젝트 기본 구조를 생성할 수 있다.
  lerna create [PACKAGE_NAME]

2-4. 공통 모듈 관리

• 공통 모듈 다운로드
  루트 경로에서 npm install [PACKAGE_NAME] —dev
  

• 각 패키지에 모듈을 설치하기 위해서 아래와 같이 스코프를 지정해준다.
  lerna add [PACKAGE_NAME] —scope [하위프로젝트명]

• 모듈을 삭제하고 싶은 경우 package.json에서 해당 모듈을 제거하고
  lerna bootstrap

• 의존성이 꼬였을 때, 모듈 clean 후 다시 설치
  lerna clean
lerna bootstrap

• lerna를 통한 패키지 배포
  lerna publish

2-5. 그 외 명령어

• lerna 실행
  lerna run build
lerna run start

• 패키지들의 devDependency를 root package.json으로 끌어올리기
  lerna link convert

• 패키지들의 dependency 설치
  lerna bootstrap