Typescript + Vite에서 Absolute Import 사용하기

Craco를 사용하다가 Vite로 넘어오면 겪게되는 여러 어려움들이 있다. 그 중 하나가 Craco에서 기본설정으로 사용하던 alias가 없는 absolute import를 사용하는 것이다.

사실 이 방법이 클린코드 관점에서는 좋다고만은 할 수 없다. library에서 import한 것 과의 구분이 명확하지 않아 여러 이상한 충돌들이 일어날 수 있기 때문이다.

하지만, 기존 코드베이스에 있는 수천개의 파일의 모든 import에 하나하나 alias를 붙이는 것 보다는 확실히 좋은 방법이다.

Alias-less Absolute Imports

vite-tsconfig-paths 라는 플러그인이 이 문제를 해결해준다.

먼저 플러그인을 설치해주자

npm i vite-tsconfig-paths -D

다음, tsconfig.json 파일에 아래 옵션을 추가해준다.

 "compilerOptions": {
    ...
    "paths": {
      "*": ["./src/*"] // 사용할 src 디렉토리
    }
  }

마지막으로, vite.config.js 파일에서 플러그인을 추가해준다.

import tsconfigPaths from 'vite-tsconfig-paths';

export default {
  plugins: [tsconfigPaths(), ... ],
};

이제, src아래에 있는 모든 파일에 Absolute Import를 사용할 수 있다.

import Header from "components/Header";
import Home from "pages/Home";
import Welcome from "pages/Welcome";