한 프로젝트에서 두가지의 프로젝트를 실행시키고 싶었다.
처음 구현한 방법은 다음과 같다.
│
├─ project-a
│ ├─ src
│ │ └─ ...
│ └─ package.json
│
├─ project-b
│ ├─ src
│ │ └─ ...
│ └─ package.json
│
└─ package.json
즉, 최상단에 package.json을 이용하여, 각각의 프로젝트 디렉토리를 만들고,
해당 디렉토리를 실행시킬 수 있게 하였다.
하지만 이 부분은 yarn의 workspace로 해결이 가능하다!
yarn workspace란?
package.json에 workspace에 등록하게 되면 각각의 프로젝트를 로컬 패키지처럼 인식할 수 있다.
즉, 워크스페이스에 있는 프로젝트들은 서로 참조하는 연관 관계를 가질 수 있다.
workspace를 어떻게 구현할까?
최상단의 package.json에 workpsaces 속성을 배열로 넣어준다.
{
"private": true,
"workspaces": ["workspace-a", "workspace-b"]
}
workspace-a/package.json은 다음과 같다.
{
"name": "workspace-a",
"version": "1.0.0",
"dependencies": {
"cross-env": "5.0.5"
}
}
workspace-b/package.json은 다음과 같다.
{
"name": "workspace-b",
"version": "1.0.0",
"dependencies": {
"cross-env": "5.0.5",
"workspace-a": "1.0.0"
}
}
yarn install & yarn을 하게되면 다음과 같은 디렉토리 구조가 나온다.
/package.json
/yarn.lock
/node_modules
/node_modules/cross-env
/node_modules/workspace-a -> /workspace-a
/workspace-a/package.json
/workspace-b/package.json
node_modules에 workspace-a가 들어있지만 b는 들어있지않다.
왜냐면, workspace-b에서 workspace-a의 의존성이 없기 때문에 workspace-a만 node_modules에 있다.
workspace로 직접 구현해보자
프로젝트 만들 디렉토리에 들어가서
yarn init -y
위 코드를 이용하여 package.json만든 이후, 수정해준다.
{
"name": "react-monorepo",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"private": true,
"workspaces": ["packages/*"]
}
아래 두 줄을 추가해준다.
workspaces 의 값은 프로젝트들의 경로가 된다.
워크스페이스들을 만들자
yarn create next-app packages/프로젝트명 --typescript
위 코드를 이용하여 프로젝트를 생성해주자. (next프로젝트로 typescript 언어를 이용하였다.)
위와 같이 packages디렉토리 내에 app 디렉토리와 next 디렉토리가 생겼다.
next 디렉토리의 package.json의 name에 따라 실행하는 방법이 다르다.
yarn workspace next dev
위와 같이 next프로젝트를 실행할 수 있다.
여기서! react프로젝트를 실행할 때는 yarn start를 하듯,
yarn workspace 프로젝트명 start
를 이용해주어야한다.
최상단의 package.json파일에서 script구문을 추가하여,
실행시키는 명령어들을 수정할 수 있다.
참고문서
https://classic.yarnpkg.com/lang/en/docs/workspaces/