monorepo use yarn berry with nextjs, react storybook + typescript - 1 (root basic setting)

yarn berry 활성화

yarn set version berry
yarn init
yarn plugin import typescript
yarn

yarn plugin import typscript

자체 types를 포함하지 않는 패키지를 추가할 때 @types 패키지를 package.json폴더에 종속성으로 자동으로 추가

Workspace 구성

root 디렉토리의 package.json 파일 수정

• packages 디렉토리 하위의 모든 디렉토리를 패키지로 봄

{
  "workspaces": ["packages/*"]
}

typescript, eslint, prettier 설치

yarn add -D typescript prettier eslint

vs code 세팅

yarn dlx @yarnpkg/sdks vscode

하위 패키지(workspace)만들기

mkdir packages

 

typescript config

tsconfgi.json

* next js의 기본 옵션을 사용함

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true
  },
  "references": [
    {
      "path": "packages/components"
    }
  ],
  "include": [],
  "exclude": ["node_modules"]
}

prettier config

.prettierrc

{
  "singleQuote": true,
  "semi": true,
  "useTabs": false,
  "tabWidth": 2,
  "trailingComma": "all",
  "printWidth": 200,
  "endOfLine": "auto",
  "arrowParens": "avoid",
  "bracketSpacing": true
}

eslint config 생략

최종 구조