모노레포 세팅

레포지토리 생성

➜ git clone study-monorepo
➜ code study-monorepo

yarn세팅

➜ yarn -v  //yarn 버전확인
➜ yarn set version berry // 해당 폴더에서만 yarn berry 사용
➜ yarn init -y // 프로젝트 설정

package.json

{
  "name": "study-monorepo",
  "workspaces": {
    "packages": [
      "package/*"
    ]
  },
  "packageManager": "yarn@4.5.1"
}

vite + React

➜ mkdir packages
➜ cd packages

➜ yarn create vite project1
➜ cd project1
➜ yarn
➜ yarn dev

App.tsx에서 타입스크립트 에러 시

https://yarnpkg.com/getting-started/editor-sdks

➜ cd ../../ //root 이동
➜ yarn add -D typescript prettier eslint
➜ yarn dlx @yarnpkg/sdks vscode

vscode에서 타입스크립트 사용 지정

or

tsconfig.base.json

cd ../../ //root 이동
➜ mkdir tsconfig.base.json

{
  "compilerOptions": {
    "target": "ESNext", //최신자바스크립트
    "useDefineForClassFields": true,
    "lib": ["DOM", "DOM.Iterable", "ESNext"],
    "allowJs": false,
    "skipLibCheck": false,
    "esModuleInterop": false,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "ESNext",
    "moduleResolution": "Node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react"
  },
}

tsconfig.json

➜ cd packages/project1

{
  "extends": "../../tsconfig.base.json",
  "files": [],
  "compilerOptions": {
    "baseUrl": ".",
    "types": ["vite/client"],
    "paths": {
      "~/*": ["src/*", "static/*"]
    }
  },
  "references": [
    { "path": "./tsconfig.app.json" },
    { "path": "./tsconfig.node.json" }
  ]
}

package 내의 project간 코드 공유

#### 다른 프로젝트도 세팅하기

 ➜ cd package/common
 ➜ yarn init

//package.json
{
  "name": "@monorepo/common",
  "packageManager": "yarn@4.5.1",
  "main": "index.ts"
}

//index.ts
const str: string = "이 변수를 공유해보자!";
export default str;

 ➜ cd ../../ //roo이동
 ➜ yarn //프로젝트 간 연결

➜ cd package/project1

//App.tsx
import "./App.css";
import str from "@monorepo/common";
function App() {
  return <>{str}</>;
}

export default App;

 ➜ yarn workspace project1 dev

root에서 run dev

 ➜ yarn workspace user dev
 // yarn workspace 프로젝트이름 스크립트이름

참고자료

모노레포 템플릿 레포지토리
@minboykim-Yarn berry로 모노레포 구성하기
@minify yarn berry로 workspace(monorepo) 구성하기