craco

프로젝트 작업을 하는데 무수한 상대경로 작성으로 지쳐버렸다..
디렉터리 구조를 절대경로로만 사용할수있는 방법이 없을까? CRACO를 알아보자

CRA프로젝트를 사용시, 복잡한 webpack설정을 할 필요없이, craco.config.js 추가로 간편하게 설정가능하다!

INSTALL

npm i --save craco-alias @craco/craco
yarn add craco-alias @craco/craco

package.json 변경

변경 전

변경 후

craco.config.js 추가

최상단 루트에 craco.config.js를 추가해준다

const CracoAlias = require('craco-alias')

module.exports = {
  plugins: [
    {
      plugin: CracoAlias,
      options: {
        source: 'options',
        baseUrl: './',
        aliases: {
          '@api': './src/api',
          '@assets': './src/assets',
          '@components': './src/components',
          '@hooks': './src/hooks',
          '@pages': './src/pages',
          '@style': './src/style',
          '@utils': './src/utils',
        },
      },
    },
  ],
}

사용법

아래와 같은 상대경로 지옥을

import api from "../../../../api/counter"
import asset from "../../../../assets/counter"
import comp from "../../../../components/counter"
import pageCounter from "../../../../pages/counter"

이렇게 개선가능하다!

import api from "@api/counter"
import asset from "@assets/counter"
import comp from "@components/counter"
import pageCounter from "@pages/counter"

예제

const webpack = require("webpack");
module.exports = {
  devServer: {
    headers: {
      "Access-Control-Allow-Origin": "*",
    },
    proxy: [
      {
        context: ["/auth", "/api"],
        target: "https://test.com",
        changeOrigin: true,
        cookieDomainRewrite: {
          "tets.com": "localhost",
        },
      },
    ],
  },
  babel: {
    plugins: ["babel-plugin-styled-components"],
  },
  webpack: {
    plugins: [
      new webpack.DefinePlugin({
        process: {env: {}}
      })
    ],
  },
};