CRA path alias 설정

CRA eject 없이 path alias 설정하기

간단한 페이지 하나 그냥 쓰자 했다가 '../../../.."를 보는 순간 바로 해결하기로 마음먹었다 ㅋㅋㅋㅋ 다음에 기억 안나면 다시 보기!

craco w/ craco-alias

0. 패키지 설치

$ yarn add @craco/craco
$ yarn add craco-alias -D

1. path 정보 입력

// tsconfig.paths.json
{
    "compilerOptions": {
        "baseUrl": "./",
        "paths": {
            "@src/*": ["src/*"],
            "@assets/*": ["src/assets/*"],
            "@components/*": ["src/components/*"],
            "@context/*": ["src/context/*"],
            "@pages/*": ["src/pages/*"]
        }
    }
}

2. craco 설정

// craco.config.js
const CracoAlias = require('craco-alias');

module.exports = {
    plugins: [
        {
            plugin: CracoAlias,
            options: {
                source: 'tsconfig',
                baseUrl: './',
                tsConfigPath: 'tsconfig.paths.json',
            },
        },
    ],
};

3. tsconfig 설정

// tsconfig.json
{
  "compilerOptions" : { ... },
  "include": [
    "src",
    "craco.config.js"
  ],
  "extends": "./tsconfig.paths.json"
}

4. eslint 설정

// .eslintrc.json
{
	"rules" : { ... },
    "settings": {
    	"typescript": {},
        "import/resolver": {
            "node": {
                "extensions": [".js", ".jsx", ".ts", ".tsx"]
            }
        }
    }
}

craco w/o craco-alias

craco-alias 없이도 alias 설정이 가능하다. 1, 3, 4번 단계는 위와 동일하고 craco 설정만 추가한다.

0. 패키지 설치

$ yarn add @craco/craco

2. craco 설정

// craco.config.json
const path = require('path');

module.exports = {
    webpack: {
        alias: {
            '@': path.resolve(__dirname, 'src/'),
            '@assets': path.resolve(__dirname, 'src/assets'),
            '@components': path.resolve(__dirname, 'src/components'),
            '@pages': path.resolve(__dirname, 'src/pages'),
            '@context': path.resolve(__dirname, 'src/context'),
        },
    },
};