정중식’ 블로그
정중식’ 블로그/
craco 설정
craco 설정

craco 설정

카테고리
환경설정
날짜
2024년 06월 12일
작성자
JeongjungsikJeongjungsik
태그

Craco?

Creact-react-App Configuration Override의 약자로,
CRA에 config 설정을 덮어쓰기 위한 패키지다.
 
여러 설정들을 오버라이딩 할 수 있는데, 대표적인 예는 다음과같다.
‘../../../App.tsx’ 이런식으로 파일의 경로가 깊어질수록 지저분하게 불러오는데,
이런것을 ‘@/App.tsx’ 이런식으로 불러올 수 있게 해준다.
 

설정

	yarn add -D @craco/craco craco-alias

tsconfig.paths.json 파일 생성

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"],
      "@components/*": ["src/components/*"]
    }
  }
}

craco.config.js 파일 생성

const CracoAlias = require('craco/craco')

module.exports = {
  plugins: [
    {
      Plugin: CracoAlias,
      option: {
        source: 'tsconfig',
        tsConfigPath: 'tsconfig.paths.json',
      },
    },
  ],
}

tsconfig.json 파일 수정

{
  "extends": "./tsconfig.paths.json", // 추가
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"
  },
  "include": ["src", "tsconfig.paths.json"] // 변경
}
 

package.json 수정

  "scripts": {
    "start": "craco-scripts start",
    "build": "craco-scripts build",
    "eject": "craco-scripts eject",
  },
 

댓글

guest