frontend/개발환경

monorepo 프로젝트 시작하기

장구루애비 2021. 12. 13. 10:13

monorepo를 프로젝트를 구성하는 가장 쉬운 방법은 yarn workspace를 이용하는 것이다.

npm 또한 버전7 부터 지원한다고 알고 있으나 아직 구성해보진 않았다. 관심 있다면 글 하단의 링크를 참조!

yarn workspace로 쉽게 monorepo 구성하기

프로젝트 루트에 workspace 설정하기

루트 package.json에 다음과 같이 설정한다.

{
  "private": true,
  "workspaces": ["workspace-a", "workspace-b"]
}

 

하위 패키지 구성

workspace로 설정된 패키지는 별도의 npm package로서 구성되어야 한다.

workspace-a/package.json

{
  "name": "workspace-a",
  "version": "1.0.0",

  "dependencies": {
    "cross-env": "5.0.5"
  }
}

구성하려는 workspace가 remote npm repository 에 배포되지 않는다면 package.json에 private: true 로 설정한다.

 

workspace-a 에 의존하는 workspace-b 구성

workspace-b/package.json

{
  "name": "workspace-b",
  "version": "1.0.0",

  "dependencies": {
    "cross-env": "5.0.5",
    "workspace-a": "1.0.0"
  }
}

 

마지막으로

프로젝트 루트에서 yarn install.

이 명령으로 하위 패키지의 중복 패키지들은 모두 프로젝트 루트의 node_modules에 설치(끌어올려진다는 의미에서 hoist라 한다) 되고, workspace에 해당하는 패키지들은 node_modules에 심볼릭 링크가 걸린다.

yarn install

yarn install 명령시 package.json을 참고로하여 yarn.lock 파일을 생성하게 되는데 yarn workspace 환경에서는 하위 package를 모두 포함한 단일의 yarn.lock을 프로젝트 루트에 생성하여 관리한다.

 

최종적으로 디렉터리는 다음과같이 구성된다.

/package.json
/yarn.lock
/node_modules
/node_modules/cross-env
/node_modules/workspace-a -> /workspace-a
/workspace-a/package.json
/workspace-b/package.json

 

참고

yarn 1.x workspace 공식문서

Yarn

 

Yarn

Fast, reliable, and secure dependency management.

classic.yarnpkg.com

workspace 관련 명령어는 다음을 참고

yarn workspace 명령어

 

yarn workspace 명령어

프로젝트 루트에 의존패키지 추가하는 명령 예를들어 eslint-plugin-import를 추가한다면 아래처럼 설치 할 수 있다. 프로젝트 루트에서 다음 명령을 날린다. yarn add -D eslint-plugin-import --ignore-workspac..

janggulu.tistory.com

npm workspace 공식문서

workspaces | npm Docs

 

workspaces | npm Docs

Working with workspaces

docs.npmjs.com

 

'frontend > 개발환경' 카테고리의 다른 글

git hooks, husky, lint-staged  (0) 2021.12.13
typescript + eslint  (0) 2021.12.13
monorepo에서 eslint 동작방식 정리  (0) 2021.12.13
monorepo와 yarn workspace 소개  (0) 2021.12.13
yarn workspace 명령어  (0) 2021.12.13