Lerna와 Yarn workspaces 사용하여 프로젝트 구축하기

https://github.com/Casana/monorepo-lerna-yarn-workspaces

 

* 본 포스팅은 Lerna와 Yarn workspaces를 익히기 위해 기록용(?)으로 작성한 포스팅임을 참고해주세요.

 

한 저장소 안에 여러 프로젝트를 구성할 경우 모노레포라고 한다.

여러 프로젝트에서 사용하는 코드 및 컴포넌트가 비슷한 경우 서로 공유하며 사용할 수 있고,
Eslint, Prettier 등의 설정을 공용으로 사용할 수 있어 꽤 장점이 많다.

 

Lerna

Lerna란 여러개의 저장소를 쉽게 관리하고 배포할 수 있게 도와주는 라이브러리다. 

Lerna에 대한 설명은 아래 링크에 자세하게 기재되어 있다. (공식 문서)

 

https://lerna.js.org/docs/introduction

Introduction | Lerna

 

Lerna로 프로젝트 생성하기

우선 Lerna가 설치되어 있어야 한다.

npm i -g lerna-cli

 

설치가 완료된 후 프로젝트 폴더를 하나 생성 후, 아래 명령어를 실행한다.

lerna init

 

그럼 폴더 내에 package.json, lerna.json 등 설정 파일이 생성된다.

 

Yarn workspaces를 같이 사용하길 희망하는 경우 package.json에 아래 key, value를 추가해줘야한다.

 

// package.json
"workspaces": [
	"packages/*"
]

 

그리고 내가 설정한 lerna.json은 아래와 같다.

 

{
  "npmClient": "yarn",
  "packages": [
    "packages/*"
  ],
  "version": "independent",
  "lerna": "3.21.0",
  "useWorkspaces": true,
  "command": {
    "publish": {
      "registry": "https://npm.pkg.github.com"
    }
  }
}

 

"npmClient"는 npm or yarn 중 사용할 매니저를 정하면 되고,

"packages"는 관리할 모듈 (레포)들을 지정하는 디렉토리에서 관리하겠다는 뜻으로 보면 된다.

packages안에 모듈들은 각각 독립적으로 관리되기 떄문에 각각의 설정 파일이 존재할 수 있다.

 

아래 명령어를 실행할 경우 공통되는 의존성들은 root node_modules에 설치되고,

만약 버전이 다른 경우 가장 많이 사용되는 버전이 호이스팅되고 경고창을 보여준다. 

 

lerna bootstrap --hoist

 

yarn을 사용하는 경우 위 명령어를 실행해도 정상적으로 작동하지 않으며, root 폴더에서 yarn install을 사용하면 된다.

 

Packages 아래에 있는 모듈의 package.json script 실행 방법

yarn workspace <module-name> <script>

 

ex) yarn workspace vue-project dev 등으로 모듈 안에 package.json script를 실행해줄 수 있다.

 

배포 및 버전 관리는 Lerna로, 패키지 관리는 Yarn으로 하기 위해 두개를 조합해서 사용하는 개발자들이 많다고 한다.