npm workspaces로 모노레포 구성하기

2022. 2. 26

npm workspaces의 등장

예로부터 모노레포를 구성하기 위한 방식은 lerna와 yarn을 활용하여 구성했었다.

npm 7 버전부터 workspaces 기능이 추가되면서 모노레포를 구성할 수 있게 되었다. 그래서 npm 환경에서 모노레포를 구성하고 싶다면 앞으로는 추가 라이브러리를 활용하지 않아도 된다.

현재 사이드 프로젝트로 공통으로 사용할 모노레포를 구성 중에 있는데, 이를 구성하기 전 정말 단순한 예제를 통해 감을 익힌 경험을 공유하려고 한다.

먼저 간단한 Node 프로젝트를 생성해준다.

// ./package.json
{
  "name": "npm-workspace",
  "version": "1.0.0",
  "main": "index.js",
  "workspaces": ["./packages/*"]
}

기존에 package.json에 익숙했던 사람은 보기 힘든 workspaces 라는 속성이 있다.

이는 Node 프로젝트에서 담당할 워크스페이스라고 보면 된다. 배열 형태로 되어있으며 여러 패키지들을 포함할 수 있다.

나는 packages 내부에 모노레포로 여러 패키지들을 관리하기 위해 package 자식들을 모두 포함시켰다.

그러면 전체 프로젝트에 대한 셋업은 끝이다. 무안할 정도로 생각보다 정말 별거 없다. 😅

자 그러면 워크스페이스 경로에 패키지들을 셋업해보자

패키지 디렉토리 내부에는 이제 개발자가 필요한 패키지들을 넣으면 된다.

예를들어 여러가지 프로젝트에서 사용되는 공통되는 함수들이라던지, 리액트 프로젝트에서 사용될 커스텀 훅, 컴포넌트 등등 정해진 범위는 없다.

대표적으로 모든 교본에서 나오는 가장 간단한 sum 함수를 만들어보자

자 여기서부터는 말 그대로 패키지이다. 즉, 모든 패키지들은 별도로 관리가 되고 배포가 될 것이다.

그러므로 각각의 패키지는 package.json을 통해 각각 관리가 될 것이기 때문에 노드 프로젝트를 전체 패키지와 마찬가지로 동일하게 관리해준다.

자 그러면 core 패키지에서는 어떻게 프로젝트를 관리해야할까?

// ./packages/core-lib/package.json
{
  "name": "@core/lib",
  "version": "1.0.0",
  "main": "index.js"
}

패키지는 본인의 역할을 하는 패키지로 네이밍을 한다.

이렇게 되면 core-lib에 해당되는 패키지를 만들었고 이제 네이밍에 맞게 핵심적인 유틸을 넣어주면 된다.

// ./packages/core-lib/index.js
function sum(a, b) {
  return a + b
}

module.exports = sum

이러면 이 멋진 sum 함수를 사용할 준비가 된 것이다.

준비가 되었으니 설치를 통해 workspace가 node_modules에 잘 들어가는지 확인해보자

 npm i

위 명령어를 실행하면 아래와 같이 생성되고 선언한 패키지 네이밍대로 잘 생성되어있다.

자 이제 사용하러 가보자! 🏃‍♂️

패키지 사용은 크게 어려울 것 없이 모듈을 가져와 사용하면 된다.

// ./src/index.js
const sum = require('@core/lib')

console.log(sum(1, 2)) // 3

우리가 만들고 node_modules에 생성됐었던 그대로 가져와서 사용해보았다.

node src/index.js

한 번 index.js를 node로 실행해보면 3 이 정상적으로 출력될 것이다.

지금까지 보면 정말 어렵지 않게 모노레포 형태를 구현할 수 있다. 현재는 물론 정말 단순한 형태로 구현하였지만, 어느정도 규모 이상의 패키지들을 구축하려면 여러가지 셋업해야할 것들이 많을 것이다. (번들러, TS, 기타 라이브러리, CI/CD 등)

여러가지를 추가로 구성하고 연구해보면서 더욱 고도화를 시켜보자!