tsconfig alias와 vite

 
tsconfig 설정에는 baseUrl, paths를 설정하여 import 시 절대경로를 사용할 수 있는 기능이 있습니다.

// tsconfig.app.json의 일부

 

"baseUrl": "./src",

"paths": {

      "@hooks/*": ["hooks/*"],

      "@components/*": ["components/*"]

 },

 

 
create-vite로 구성한 react 앱을 구성하는 과정에서 위와 같은 alias 설정을 하는 일이 있었습니다.
tsconfig 설정 자체는 이상이 없었지만, vite를 통해 앱을 실행하는 과정에서 경로를 찾지 못하는 문제가 나타났습니다.
 
앱을 실행하는 것은 vite이기에 vite와 tsconfig 사이의 문제이지 않을까 싶어 검색을 진행했고, tsconfig 설정에 이어 vite의 config에도 추가적인 설정이 필요함을 알았습니다
create-vite로 구성한 react 앱을 구성하는 과정에서 위와 같은 alias 설정을 하는 일이 있었습니다.
tsconfig 설정 자체는 이상이 없었지만, vite를 통해 앱을 실행하는 과정에서 경로를 찾지 못하는 문제가 나타났습니다.
vite는 TypeScript의 빌드 시스템과는 별개로 작동하므로 tsconfig 설정을 직접적으로 인식하지 않습니다. 그래서 추가적인 설정이 필요했는데요, 검색을 통해 다음 stackoverflow 질문, 답변을 참고하여 tsconfig 설정에 이어 vite의 config에도 추가적인 설정이 필요함을 알았습니다.
 
https://stackoverflow.com/questions/77249074/how-do-i-use-typescript-path-aliases-in-vite

How do I use Typescript path aliases in Vite?

 
가장 간편한 방법은 tsconfig에 설정된 path들을 vite config가 확인하고 적용할 수 있게 하는 vite-tsconfig-paths라는 라이브러리였습니다. 아래와 같이 vite-config-paths 라이브러리를 설치하고 plugin에 tsconfigPaths()를 추가하니 vite로 실행하는 경우에도 절대경로를 정상적으로 인식함을 확인할 수 있었습니다.

// vite.config.ts

 

import { defineConfig } from "vite";

import react from "@vitejs/plugin-react-swc";

import tsconfigPaths from "vite-tsconfig-paths";

export default defineConfig({

  plugins: [react(), tsconfigPaths()],

});

 
사용은 되었으니 vite-tsconfig-paths 플러그인은 어떻게 paths를 적용하는지가 궁금해졌습니다.
 
vite-tsconfig-paths의 실제 구현(https://github.com/aleclarson/vite-tsconfig-paths/blob/master/src/index.ts)을 간단히 보면, 플러그인은 Vite가 프로젝트를 빌드(할 때 tsconfig.json 파일을 읽고, paths 설정을 Vite의 resolve.alias 옵션에 매핑하는 방식으로 동작합니다. 구체적으로는 TypeScript의 createMatchPath와 같은 함수를 활용해 tsconfig의 alias를 파싱하고, Vite가 import 시 해당 경로를 정확히 해석하도록 alias 목록에 추가해줍니다.
 
그 결과 tsconfig의 paths에 작성된 절대경로 옵션들이 vite에서도 정상적으로 사용될 수 있습니다.

---

2025년 2월 4일 글 내용 추가

tsconfig path 플러그인을 추가하는 방법 말고도 vite config에 alias를 설정하여 "@"를 추가하는 방법 또한 가능합니다.

 

import path from 'path';

import react from '@vitejs/plugin-react-swc';

import { defineConfig } from 'vite';

// https://vitejs.dev/config/

export default defineConfig({

  plugins: [react()],

  resolve: {

    alias: {

      '@': path.resolve(__dirname, './src'),

    },

  },

});

Node.js의 paths 모듈을 이용하여 경로를 지정해주는 방법입니다. 이 때는 Node.js 모듈을 이용해야 하니 devDependencies에 @types/node를 추가해야 합니다.