yarn-workspace 구성하기

[4BFC]

• yarn-workspace 구성하기

yarn 설치

• yarn을 설치하기 위한 명령어

    npm install -g yarn
  

  yarn 버전(ver.1.22.22) 확인하기

    yarn --version
  

  yarn 기반 package 설치

    yarn init
  

  설치 후 package.json 구성

    {
      "name": "TrendGarage",
      "version": "1.0.0",
      "main": "index.js",
      "repository": "https://4BFC@github.com/Programming-Contents-List/TrendGarage.git",
      "author": "4Bee <4bee.code@gmail.com>",
      "license": "MIT",
    }
  

yarn-berry 설치

• yarn-berry 설치하기 위한 명령어

    yarn set version berry
  

  yarn(-berry) 버전(ver.4.4.1) 확인하기

    yarn --version
  

  설치 후 package.json 구성

    {
      "name": "TrendGarage",
      "packageManager": "yarn@4.4.1",
      "version": "1.0.0",
      "main": "index.js",
      "repository": "https://4BFC@github.com/Programming-Contents-List/TrendGarage.git",
      "author": "4Bee <4bee.code@gmail.com>",
      "license": "MIT",
    }
  

---

PnP 구성하기

yarn vsc에 yarn을 연동할 수 있는 Sdk 설정

• yarn dlx @yarnpkg/sdks vscode 명령어는 Yarn Plug'n'Play (PnP) 환경에서 VSCode와 같은 편집기가 Yarn PnP 의존성 관리 방식을 인식하고 제대로 동작할 수 있도록 설정하기 위해 필요

    yarn dlx @yarnpkg/sdks vscode
  

• yarn dlx @yarnpkg/sdks vscode로 인한 .vsccde (자동)구성
  • .vscode/setting.json

    {
      "search.exclude": {
        "**/.yarn": true,
        "**/.pnp.*": true
      },
      "typescript.tsdk": ".yarn/sdks/typescript/lib",
      "typescript.enablePromptUseWorkspaceTsdk": true
    }
    

  • .vscode/extentions.json

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

node_modules와 package-lock.json 삭제

모든 패키지들을 PnP의 읜존성을 부여하기위해 node_modules와 package-lock.json을 삭제한다.

.yarnrc.yml에 PnP를 위한 설정

• cache

Zeroinstall

---

yarn-workspace 구성하기

yarn-worksapce를 구성하기 위해서는 package.json에 worksapce를 라는 문법을 삽입하면 된다.
- root/package.json
/*--이하생략--*/ "workspaces": [ "trends/*" ], /*--이하생략--*/

• yarn-workspace를 전체적으로 세팅한 디렉토리 구조

    TRENDGARAGE
    ├── .vscode
    │   ├── extensions.json
    │   └── settings.json
    ├── .yarn
    ├── trends
    ├── .gitignore
    ├── .pnp.cjs
    ├── .pnp.loader.mjs
    ├── .yarnrc.yml
    ├── package.json
    ├── README.md
    ├── tsconfig.json
    └── yarn.lock
  
  

---

• jest 디렉토리 생성 후 설치
  • jest를 통한 테스트(1)
  • ts 디렉토리 생성 후 설치
    • jest를 통한 테스트(2)
• CRA로 리액트 설치(js): react-CRA-js
  • pnp에서 동작하는 CRA 설치 방법

      yarn create react-app . --use-pnp
      or
      yarn create react-app my-app --use-pnp
    

    이후, 꼭 설치한 (리액트가 있는)디렉토리로 이동 후 아래 명령어 실행

      yarn install
    

  • yarn-start 이후 발생하는 babel-loader 관리하기
    • react-app-rewired와 carco

        // config-overrides.js 
        module.exports = function override(config, env) {
          config.module.rules.forEach((rule) => {
            if (rule.oneOf) {
              rule.oneOf.forEach((one) => {
                if (one.loader && one.loader.includes("babel-loader")) {
                  one.options.cacheDirectory = "./webpack/babel/.babel-cache"; // 캐시 경로 변경
                }
              });
            }
          });
          return config;
        };
      

    cache 관리를 .yarn에서 관리할 수 있도록 하려고 했으나 의존성 관리 복잡성으로 각 프로젝트 하위 로컬을 통해서 관리할 수 있도록 구성 했다.
  • jest를 통한 테스트(3)
• CRA로 리액트 설치(ts): react-CRA-ts
  • jest를 통한 테스트(4)
• eslint 규칙 설정(root)
• prettier 규칙 설정(root)
• webpack 설정 및 설치
• 구체적인 디렉토리 설명이 필요

REF

링크
자주 사용되는 yarn 명령어
yarn 설치하기
yarn-workspace(1)
yarn-workspace(2)
yarn pnp babel-loader

• github에 불필요한 파일, 디렉토리가 업로드가 되었다면 git rm -r --cached .vscode/ git 명령어를 사용해서 제거 하면 된다.

Summary

• yarn은 npm과 달리 병렬로 설치하는 방식