craco란?

@craco/craco

상대 경로 지옥에서 벗어나기 위한 craco
../을 무한 반복 하여 찾는 불편함을 해소할 craco 

 

 

 

Craco는 Create-React-App Configuration Override의 약어로, 말 그대로 CRA에 config 설정을 덮어쓰기 위한 패키지이다.

 

1. 설치

npm i @craco/craco

2.package.json scripts 수정

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

2-1. rm -rf node_modules package-lock.json 으로node_modules과 package-lock.json을 삭제후 npm install을 통해 재설치를 한다.

 

3. 프로젝트 root 경로에 craco.config.js(설정파일) 만들기 (아래의 폴더명은 예시이다.)

//craco.config.js


/* eslint-disable */
const path = require("path");
module.exports = {
  /*
  eslint: {
    enable: false
  },
  */
  webpack: {
    baseUrl: ".",
    alias: {
      "#assets": path.resolve(__dirname, "public/assets"),
      //----------------------------------------
      "#components": path.resolve(__dirname, "src/components"),
      "#helpers": path.resolve(__dirname, "src/helpers"),
      "#i18n": path.resolve(__dirname, "src/i18n"),
      "#navs": path.resolve(__dirname, "src/navigations"),
      "#pages": path.resolve(__dirname, "src/pages"),
      "#stores": path.resolve(__dirname, "src/stores"),
      "#styles": path.resolve(__dirname, "src/styles"),
      "#utils": path.resolve(__dirname, "src/utils"),
    },
  },
  jest: {
    configure: {
      moduleNameMapper: {
        "^\\#assets/(.*)$": "<rootDir>/public/assets/$1",
        //----------------------------------------------------------
        "^\\#components/(.*)$": "<rootDir>/src/components/$1",
        "^\\#helpers/(.*)$": "<rootDir>/src/helpers/$1",
        "^\\#i18n/(.*)$": "<rootDir>/src/i18n/$1",
        "^\\#navs/(.*)$": "<rootDir>/src/navigations/$1",
        "^\\#pages/(.*)$": "<rootDir>/src/pages/$1",
        "^\\#stores/(.*)$": "<rootDir>/src/stores/$1",
        "^\\#styles/(.*)$": "<rootDir>/src/styles/$1",
        "^\\#utils/(.*)$": "<rootDir>/src/utils/$1",
      },
    },
  },
};

 

 

결과

import DashboardSpinner from "../../../../pages/home";
import DashboardSpinner from "../../../../components/Header";

🔽

import Home from '#pages/home';
import Header from "#components/Header";