Yarn Workspace로 Monorepo를 만드는 방법

TLDR; 작업 코드만 보고 싶다면 여기에서 전체 프로젝트를 보십시오: https://github.com/bandrewfisher/monorepo-tutorial

지난 몇 년 동안 저는 대학교에서 교수를 위한 프로젝트를 진행했습니다. 고대 아시리아 무역에 관한 연구 시설을 제공하는 사이트입니다. 정말 재미있었고 그 과정에서 웹 개발에 대해 많은 것을 배웠습니다. 한동안 저는 프로젝트를 위해 세 개의 별도 Git 리포지토리를 유지했습니다. 하나는 Vue 프런트엔드용, 하나는 TS Express 백엔드용, 다른 하나는 다른 두 리포지토리 간에 공유되는 유틸리티 코드를 포함하는 것입니다.

이것은 최소한 유지하기가 까다로웠습니다. 코드베이스가 상대적으로 작기 때문에 모든 것을 단일 저장소로 옮기는 것이 유지 관리가 더 쉬울 것이라고 생각했습니다. 이 게시물에서는 여러 패키지가 포함된 JS 프로젝트용 monorepo를 쉽게 만드는 방법을 설명합니다.

프로젝트 만들기

새 디렉터리를 만든 다음 Yarn으로 초기화합니다.

$ mkdir vue-express-monorepo
$ cd vue-express-monorepo
$ yarn init -y

Yarn 작업 공간 설정

모노레포를 생성하기 위해 Yarn workspaces 을 사용할 것입니다. 문서에 따르면 "한 번만 실행하면yarn install 모든 패키지를 한 번에 설치할 수 있는 방식으로 여러 패키지를 설정할 수 있습니다."npm을 사용하는 경우 동일한 목표를 달성하는 데 도움이 되는 Lerna이라는 꽤 좋은 도구가 있습니다. Yarn workspaces don't claim to replace Lerna , 하지만 내 목적을 위해 지금까지 Lerna 없이 Yarn 작업 공간을 사용할 수 있다는 것을 발견했습니다.

두 개의 패키지를 만들어 packages 라는 디렉터리에 넣습니다. packages 디렉터리를 만듭니다.

$ mkdir packages

Yarn에게 packages 디렉토리에 패키지가 포함되어 있음을 알려야 합니다. 다음과 같이 보이도록 package.json 파일을 편집합니다.

{
  "name": "vue-express-monorepo",
  "private": true,
  "workspaces": [
    "packages/*"
  ]
}

이제 패키지를 만들 준비가 되었습니다.

패키지 생성

packages 디렉터리에 디렉터리를 만듭니다. Yarn으로 초기화하고 index.js 파일을 만듭니다.

$ cd packages
$ mkdir package-a
$ cd package-a
$ yarn init -y
$ touch index.js

이제 이것을 index.js 파일에 추가하십시오.

function packageAFunc() {
  console.log('Using a function from package A');
}

module.exports = packageAFunc;

다른 패키지를 만들고 그 안에 있는 package-a에서 이 함수를 사용해보자.

$ cd ..
$ mkdir package-b
$ cd package-b
$ yarn init -y
$ touch index.js

index.js의 package-b 파일에 다음을 추가합니다.

const packageAFunc = require('package-a');

packageAFunc();

마지막으로 프로젝트의 루트 수준에서 yarn install를 실행하기만 하면 됩니다.

$ cd ../..
$ yarn install

Yarn은 프로젝트 루트의 package-a 폴더에 package-b 및 node_modules를 연결합니다.
package-b 파일을 실행해 보십시오.

$ node packages/package-b/index.js

콘솔에 인쇄된 "패키지 A의 기능 사용"이 표시되어야 합니다!

결론

monorepo를 사용하기 위해 구축한 사이트를 변환하는 것은 매우 도움이 되었습니다. 이것은 매우 간단한 예이지만 이 게시물의 동일한 개념을 사용하여 3개의 개별 프론트엔드, 백엔드 및 유틸리티 패키지가 있는 모노레포를 만들었습니다. 덕분에 프로젝트 전체에서 코드를 훨씬 쉽게 공유할 수 있었습니다. 모노레포를 쉽게 만들 수 있는 이 흥미로운 기능이 Yarn에 포함되어 있다는 것이 정말 좋습니다.

이 접근 방식의 주요 이점 중 하나는 사이트에 대한 지속적인 배포입니다. 모든 것이 하나의 리포지토리에 있기 때문에 모든 것을 AWS에 배포하기 전에 Vue 프런트엔드와 TS Express 백엔드를 구축하는 빌드 스크립트를 쉽게 작성할 수 있었습니다. 사이트가 여전히 여러 리포지토리에 분산되어 있었다면 이것이 조금 더 까다로웠을 것이라고 생각합니다.

전체 코드와 함께 GitHub 리포지토리에 대한 링크를 게시했지만 여기에 다시 좋은 측정이 있습니다. https://github.com/bandrewfisher/monorepo-tutorial