Vite Alias

TypeScript + Vite 사용시 Alias 설정

TypeScript를 사용하지 않은 Vite alias 설정은 사용한것과 다르다.

Typescript를 사용하여 Vite의 alias 설정을 할 때,

먼저 typescript에서 node 사용하기 위한 모듈 설치가 필요하다. npm install --save @types/node. 해당 모듈 설치를 통해 typescript환경에서도 import path가 가능하다.

vite+typescript를 사용하면 vanilla를 사용할 때보다 설정 및 json파일이 많은 것을 볼 수 있는데, tsconfig,vite.config.ts를 변경하면 alias를 사용할 수 있다.

먼저, tsconfig의 compilerOptions 내부에 baseUrl과paths 두 가지 속성을 추가한다.

	"baseUrl": ".",
    "paths": {
      "@/*": ["src/*"],
      "@context/*": ["src/context/*"]
      // context 부분은 자신이 alias를 설정할 부분을 추가적으로 작성해주면 된다.
    },

그리고, vite.config.ts파일의 defineConfig 내부에

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: [
      { find: '@', replacement: path.resolve(__dirname, 'src') },
      {
        find: '@components',
        replacement: path.resolve(__dirname, 'src/components')
      },
      { find: '@context', replacement: path.resolve(__dirname, 'src/context') }
      //tsconfig에서 @context 부분이 추가된것 처럼 이부분도 위 형태와 동일하게 설정을 추가해 주면 된다.
    ]
  },
}

와 같이 alias설정을 해주면 된다.
tsconfig파일 부분에서 잠깐 언급했듯이, 자신이 설정하고자 하는 alias에 대해 tsconfig와 vite.config 두 곳다 추가해 주면 된다.

이로서 다른 파일에서 import를 할때,

import { contextData } from '@context/data.tsx';

같은 형태로 불러올 수 있다.