Yarn Workspaces: 전문가처럼 프로젝트의 코드베이스 구성

새 프로젝트 작업을 시작할 때마다 “백 엔드 서버와 프런트 엔드 클라이언트에 대해 별도의 git 리포지토리를 사용해야 하나요? 코드베이스를 구성하는 가장 좋은 방법은 무엇입니까?”

나는 내 개인 웹사이트에서 몇 달 동안 일한 후에 이와 같은 질문을 받았습니다. 나는 원래 동일한 저장소에 모든 코드를 가지고 있었습니다. 백엔드는 Node.js를 사용하고 프론트엔드는 Pug와 함께 ES6을 사용했습니다. 두 프로젝트를 동일한 repo에 저장하면 기능과 클래스를 쉽게 검색하고 리팩터링을 용이하게 하기 때문에 편의상 이 구성을 채택했습니다. 그러나 몇 가지 단점을 발견했습니다.

• 독립적인 배포가 없습니다.
  두 앱 모두 동일한 package.json 을 사용하고 있었고 두 프로젝트에서 명확한 구분이 없었습니다.
• 불분명한 경계.
  저는 전역 package.json 에 의존하기 때문에 백엔드와 프론트 엔드에 대한 특정 버전을 설정하는 메커니즘이 없었습니다.
• 버전 관리 없이 유틸리티 및 코드를 공유합니다.

약간의 조사 후, Yarn 작업 공간은 이러한 단점을 해결하는 훌륭한 도구이며 monorepo 프로젝트를 만드는 데 유용한 도구라는 것을 발견했습니다(나중에 더 많이 나올 예정입니다!).

이 기사에서는 Yarn 작업 공간에 대한 소개를 공유합니다. 첫 번째 프로젝트를 만드는 방법에 대한 자습서를 함께 실행하고 요약 및 다음 단계로 마무리합니다.

Yarn 작업 공간이란 무엇입니까?

Yarn은 Facebook 사람들이 만든 패키지 관리자이며 Yarn 작업 공간이라는 훌륭한 기능이 있습니다. Yarn 작업 공간을 사용하면 모놀리식 저장소(monorepo)를 사용하여 프로젝트 코드베이스를 구성할 수 있습니다. 아이디어는 단일 저장소에 여러 패키지가 포함된다는 것입니다. 패키지는 격리되어 더 큰 프로젝트와 독립적으로 작동할 수 있습니다.

대안으로 이러한 모든 패키지를 별도의 저장소에 배치할 수 있습니다. 불행히도 이 접근 방식은 패키지 및 종속 프로젝트에서 개발할 때 공유 가능성, 효율성 및 개발자 경험에 영향을 줍니다. 또한 단일 리포지토리에서 작업할 때 전체 개발 수명 주기 동안 프로세스를 개선하기 위해 보다 신속하게 이동하고 보다 구체적인 도구를 구축할 수 있습니다.

Monorepo 프로젝트는 Google이나 Facebook과 같은 대기업에서 널리 수용되었으며 monorepo가 ​​확장될 수 있음이 입증되었습니다.

"

React는 monorepo인 오픈 소스 프로젝트의 좋은 예입니다. 또한 React는 Yarn 작업 공간을 사용하여 이러한 목적을 달성합니다. 다음 섹션에서는 Yarn을 사용하여 첫 번째 monorepo 프로젝트를 만드는 방법을 배웁니다.

6단계로 Yarn Workspace를 사용하여 React 및 Express로 Monorepo 프로젝트 만들기

지금까지 Yarn이 무엇인지, monorepo가 ​​무엇인지, 그리고 Yarn이 monorepo를 만드는 데 훌륭한 도구인 이유를 배웠습니다. 이제 Yarn 작업 공간을 사용하여 새 프로젝트를 설정하는 방법을 처음부터 배우겠습니다. 따라 하려면 최신 npm 설치가 포함된 작업 환경이 필요합니다. 소스 코드를 다운로드합니다.

전제 조건

이 자습서를 완전히 완료하려면 컴퓨터에 Yarn이 설치되어 있어야 합니다. 이전에 Yarn을 설치하지 않은 경우 다음 지침을 따르세요.

이 튜토리얼에서 따라야 할 단계는 다음과 같습니다.

1. 프로젝트 및 루트 작업 공간 만들기
2. React 프로젝트 생성 및 작업 공간 목록에 추가
3. Express 프로젝트를 만들고 작업 공간에 추가
4. 모든 종속성을 설치하고 yarn.lock에 인사하기
5. 와일드카드(*)를 사용하여 모든 패키지 가져오기
6. 두 패키지를 모두 실행하는 스크립트 추가

1. 프로젝트 및 루트 작업 공간 만들기

로컬 컴퓨터 터미널에서 example-monorepo 라는 새 폴더를 만듭니다.

 $ mkdir example-monorepo

폴더 내에서 루트 작업 공간을 사용하여 새 package.json 을 만듭니다.

 $ cd example-monorepo $ touch package.json

이 패키지는 실수로 루트 작업 영역을 게시하는 것을 방지하기 위해 비공개여야 합니다. 새 package.json 파일에 다음 코드를 추가하여 패키지를 비공개로 만듭니다.

 { "private": true, "name": "example-monorepo", "workspaces": [], "scripts": {} }

2. React 프로젝트 생성 및 작업 공간 목록에 추가

이 단계에서는 새 React 프로젝트를 만들고 루트 작업 공간 내의 패키지 목록에 추가합니다.

먼저, 자습서에서 생성할 다른 프로젝트를 추가할 packages 라는 폴더를 생성해 보겠습니다.

 $ mkdir packages

Facebook에는 새로운 React 프로젝트를 생성하는 명령이 있습니다: create-react-app . 필요한 모든 구성과 스크립트를 사용하여 새 React 앱을 만드는 데 사용할 것입니다. 1단계에서 만든 패키지 폴더 안에 "클라이언트"라는 이름으로 이 새 프로젝트를 만들고 있습니다.

 $ yarn create react-app packages/client

새로운 React 프로젝트를 생성했으면 Yarn에게 해당 프로젝트를 작업 공간으로 취급하도록 지시해야 합니다. 그렇게 하려면 루트 package.json 의 "workspaces" 목록 안에 "client"(이전에 사용한 이름)를 추가하기만 하면 됩니다. create-react-app 명령을 실행할 때 사용한 것과 동일한 이름을 사용해야 합니다.

 { "private": true, "name": "example-monorepo", "workspaces": ["client"], "scripts": {} }

3. 익스프레스 프로젝트 생성 및 작업 공간에 추가

이제 백엔드 앱을 추가할 차례입니다! 우리는 express-generator 를 사용하여 필요한 모든 구성과 스크립트로 Express 스켈레톤을 만듭니다.

컴퓨터에 express-generator 가 설치되어 있는지 확인하십시오. 다음 명령으로 Yarn을 사용하여 설치할 수 있습니다.

 $ yarn global add express-generator --prefix /usr/local

express-generator 를 사용하여 packages 폴더 안에 "server"라는 이름으로 새 Express 앱을 만듭니다.

 $ express --view=pug packages/server

마지막으로 루트 package.json 내부의 작업 공간 목록에 새 패키지 "server"를 추가합니다.

 { "private": true, "name": "example-monorepo", "workspaces": ["client", "server"], "scripts": {} }

참고 : 이 자습서는 두 개의 패키지(서버 및 클라이언트)만으로 단순화되었습니다. 프로젝트에는 일반적으로 필요한 만큼의 패키지가 있을 수 있으며, 일반적으로 오픈 소스 커뮤니티에서는 @your-project-name/package-name 명명 패턴을 사용합니다. 예: 내 웹사이트에서 @ferreiro/server 를 사용합니다.

4. 모든 종속성을 설치하고 yarn.lock에 인사하기

React 앱과 Express 서버를 추가했으면 모든 종속성을 설치해야 합니다. Yarn 작업 공간은 이 프로세스를 단순화하므로 더 이상 모든 단일 애플리케이션으로 이동하여 해당 종속성을 수동으로 설치할 필요가 없습니다. 대신, 우리는 하나의 명령( yarn install )을 실행하고 Yarn은 모든 패키지에 대한 모든 종속성을 설치하고 최적화하고 캐시하는 마법을 수행합니다.

다음 명령을 실행합니다.

 $ yarn install

이 명령은 yarn.lock 파일을 생성합니다(이 예와 유사). 여기에는 프로젝트에 대한 모든 종속성과 각 종속성에 대한 버전 번호가 포함됩니다. Yarn은 이 파일을 자동으로 생성하므로 수정하면 안 됩니다.

5. 와일드카드(*)를 사용하여 모든 패키지 가져오기

지금까지 우리가 추가한 모든 새 패키지에 대해 workspaces:[] 목록에 새 패키지를 포함하도록 루트 package.json 도 업데이트해야 했습니다.

Yarn이 packages 폴더 안에 모든 패키지를 포함하도록 지시하는 와일드카드(*)를 사용하여 이 수동 단계를 피할 수 있습니다.

루트 package.json 내에서 "workspaces": ["packages/*"] 줄로 파일 콘텐츠를 업데이트합니다.

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

6. 두 패키지를 모두 실행하는 스크립트 추가

마지막 단계! React 클라이언트와 Express 클라이언트의 두 패키지를 동시에 실행할 수 있는 방법이 필요합니다. 이 예에서는 concurrently 를 사용합니다. 이 패키지를 사용하면 여러 명령을 병렬로 실행할 수 있습니다.

루트 package.json 에 concurrently 추가:

 $ yarn add -W concurrently

루트 작업 공간 package.json 내에 세 개의 새 스크립트를 추가하십시오. 두 개의 스크립트는 React 및 Express 클라이언트를 독립적으로 초기화합니다. 다른 하나는 두 스크립트를 병렬로 실행하기 위해 concurrently 사용합니다. 참조를 위해 이 코드를 참조하십시오.

 { "private": true, "name": "example-monorepo", "workspaces": ["packages/*"], "scripts": { "client": "yarn workspace client start", "server": "yarn workspace server start", "start": "concurrently --kill-others-on-fail \"yarn server\" \"yarn client\" } }

참고 : "서버" 및 "클라이언트" 패키지를 생성하는 데 사용한 도구( create-react-app 및 express-generator )가 이미 해당 스크립트를 추가 하기 때문에 start 스크립트를 "서버" 및 "클라이언트" 패키지에 작성할 필요 가 없습니다. 그래서 우리는 가도 좋다!

마지막으로 Express 부팅 스크립트를 업데이트하여 포트 4000에서 Express 서버를 실행하는지 확인하십시오. 그렇지 않으면 클라이언트와 서버가 동일한 포트(3000)를 사용하려고 시도합니다.

packages/server/bin/www 로 이동하여 15행에서 ​​기본 포트를 변경합니다.

 var port = normalizePort(process.env.PORT || '4000');

이제 패키지를 실행할 준비가 되었습니다!

 $ yarn start

여기에서 갈 곳

다룬 내용을 요약해 보겠습니다. 먼저 Yarn 작업 공간과 이것이 모노레포 프로젝트를 만드는 데 훌륭한 도구인 이유에 대해 배웠습니다. 그런 다음 Yarn을 사용하여 첫 번째 JavaScript monorepo 프로젝트를 만들고 앱의 논리를 클라이언트와 서버의 여러 패키지로 나누었습니다. 또한 첫 번째 기본 npm 스크립트를 만들고 각 앱에 필요한 종속성을 추가했습니다.

이 시점에서 오픈 소스 프로젝트를 자세히 검토하여 Yarn 작업 공간을 사용하여 프로젝트 논리를 여러 패키지로 분할하는 방법을 확인하는 것이 좋습니다. 반응은 좋은 것입니다.

또한 이 접근 방식을 사용하여 백 엔드 및 프런트 엔드 앱을 독립 패키지로 분리하는 프로덕션 웹 사이트를 보려면 블로그 관리자도 포함된 내 웹 사이트의 소스를 확인할 수 있습니다. Yarn 작업 공간을 사용하기 위해 코드베이스를 마이그레이션할 때 Kyle Wetch와 함께 pull 요청을 만들었습니다.

또한 React, webpack, Node.js, Yarn 작업 공간을 사용하는 해커톤 프로젝트에 대한 인프라를 설정했으며 여기에서 소스 코드를 확인할 수 있습니다.

마지막으로, 개발 수명 주기에 익숙해지기 위해 독립 패키지를 게시하는 방법을 배우는 것은 정말 흥미로울 것입니다. 확인하고 싶은 몇 가지 자습서가 있습니다: yarn publish 또는 npm publish.

의견이나 질문이 있으면 주저하지 말고 Twitter에서 저에게 연락하십시오. 또한 다음 달에는 이에 대한 더 많은 콘텐츠를 내 블로그에 게시할 예정이므로 여기에서도 구독할 수 있습니다. 즐거운 코딩!