vite path alias 설정

다른 directory의 파일을 import 할때 "../../../file.js"처럼 적는것은
아주 귀찮을 뿐 아니라 헷갈리기도 한다.

이럴때는 path alias를 설정해 귀찮은 import 문을 줄일수 있다.

지금 하는 프로젝트는 react + vite + typescript 조합인데
vite.config.ts와 tsconfig.json 둘 다 설정해줘야한다.

설정

• vute.config.ts

  import { defineConfig } from "vite";
  import react from "@vitejs/plugin-react-swc";
  import path from "path";
  
  // https://vitejs.dev/config/
  export default defineConfig({
      plugins: [react()],
      resolve: {
          alias: [{ find: "@/", replacement: path.resolve(__dirname, "./src/") }],
      },
  });

• tsconfig.json

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

실제 import문

• before

  import {ButtonType} from "../../types/ButtonType";

• after

  import { ButtonType } from "@/types/ButtonTypes";