yarn berry(2.x, 3.x, 4.x) workspace

실습환경 셋팅

1. nvm 설치
   • window/mac 설치 방법: https://jang8584.tistory.com/295

2. vscode 설치
   • 설치 링크: https://code.visualstudio.com/

3. vscode 익스텐션 설치

ID: abumalick.vscode-nvm
VS Marketplace 링크: https://marketplace.visualstudio.com/items?itemName=abumalick.vscode-nvm

1. yarn berry 버전 변경

// project 폴더 생성
mkdir yarn-berry-workspace
cd yarn-berry-workspace


// yarn 버전 확인
yarn -v 

// yarn 버전 변경
yarn set version berry
yarn set version stable

// yarn 버전 확인
yarn -v

2. yarn workspace 패키지 만들기

// packages 디렉토리 만들기 / 루트 초기화
yarn init -w

• yarn berry cli 명령어: https://yarnpkg.com/cli/init

3. root pacakge.json파일 수정

./package.json

apps/* 폴더추가

{
  "name": "yarn-berry-workspace-test",
  "packageManager": "yarn@3.5.0",
  "private": true,
  "workspaces": [
    "apps/*",
    "packages/*"
  ]
}

4. apps 폴더에 create next-app 프로젝트 추가

// 1. create-next-app 프로젝트 생성
cd apps
yarn create next-app

저는 아래와 같이 셋팅 하였습니다.

pacakge.json 수정. "name": "@wanted/web"으로 변경

// 3. root가서 상태 갱신하기

cd ..
yarn


// 4. 실행 확인
yarn workspace @wanted/web run dev

5. typescript error 발생

./apps/wanted/pages/index.tsx 을 열어보면 typescript error가 발생합니다.

yarn berry pnp는 node_modules 모듈을 불러오는 방식이 다르기 때문에 생기는 문제입니다.

yarn add -D typescript
yarn dlx @yarnpkg/sdks vscode

6. yarn PnP 사용을 위한 vscode extension 설치 arcanis.vscode-zipfs

이미 추가 되어 있다면 skip 합니다.

.vscode/extensions.json에 추가

{
  "recommendations": ["arcanis.vscode-zipfs"]
}

7. pacakges/lib 공통 패키지를 만들어보기

packages/lib 폴더 생성하고, 아래 스크립트를 실행한다.

// lib 폴더 이동
cd packages/lib

// pacakge.json 파일 생성
yarn init

// typescript 설치
yarn add typescript

아래와 같이packages/lib/package.json 파일 수정한다.

{
  "name": "@wanted/lib",
  "version": "1.0.0",
  "private": true,
  "main": "./src/index.ts",
  "depdndencies": {
    "typescript": "^5.0.4"
  }
}

packages/lib/tsconfig.json 파일 생성 후 설정값 넣기

{
  "$schema": "https://json.schemastore.org/tsconfig",
  "compilerOptions": {
    "strict": true,
    "useUnknownInCatchVariables": true,
    "allowJs": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "isolatedModules": true,
    "newLine": "lf",
    "module": "ESNext",
    "moduleResolution": "node",
    "target": "ESNext",
    "lib": ["ESNext", "dom"],
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "baseUrl": "./src",
    "noEmit": false,
    "incremental": true,
    "resolveJsonModule": true,
    "paths": {}
  },
  "exclude": ["**/node_modules", "**/.*/", "./dist", "./coverage"],
  "include": ["**/*.ts", "**/*.js", "**/.cjs", "**/*.mjs", "**/*.json"]
}

packages/lib/src/index.ts 파일 생성후, 아래 코드 넣는다.

export const sayHello = () => {
   return "hello from lib";
};

8. apps/wanted에서 pacakges/lib 의존해 보기

apps/wanted에 의존성 주입

// root로 이동한다.
cd ../../

// root 실행한다.
yarn workspace @wanted/web add @wanted/lib

apps/wanted/package.json에 의존성이 추가된 것을 확인 합니다.

9. apps/wanted/pages/index.tsx 파일에서 @wanted/lib 사용해보기

@wanted/lib에 sayHello 함수를 호출해 봅니다.

그리고, @wanted/web을 구동해 봅니다.

yarn workspace @wanted/web run dev

아래와 같이 hello from lib이 노출된다면 성공 입니다.