[Vue & TS] 자동 모듈 import 설정 하기 (With. Vite)

개발 환경

vite + vue + typescript

필요성

개발을 하면서 대부분에 파일에서 필요한 모듈들이 있을 것이다.

예를들어, 지금은 vue 프로젝트를 하니 vue 관련된 모듈들은 대부분 파일에서 import하고 있다.

이러한 import 구문이 많아지면 가독성이 떨어지기도해서, build tool의 도움을 받아 자동으로 import를 하도록 설정하기로 하였다.

무수한 import 예

설치

설치 및 적용은 아주 간단하다.

공식문서

npm i -D unplugin-auto-import

적용

vite.config.ts

import AutoImport from 'unplugin-auto-import/vite'

export default defineConfig({
  plugins: [
	vue(),
	AutoImport({
		// global imports to register
		imports: [
			'vue',
			'vue-router',
			'pinia',
			{
				'@vueuse/core': [
					// named imports
					'useElementHover', // import { useElementHover} from '@vueuse/core',
				],
			},
		],
		dts: true,
	}),
	...
  ],
})

• imports
  • 필요한 라이브러리 목록을 등록하는 속성
• dts
  • auto-imports.d.ts 전역 타입이 정의된 파일을 생성 해주는 속성, import 구문 없이 editor에서 정상인식 하기 위해서 필요하다.

위 설정말고도 여러 설정이 가능하니 공식문서를 참고하자.

*️⃣ 언제 import 될까?

어차피 vite에서 컴파일 시, 사용되는 module만 import 하게 되어있음.

적용 확인

auto-imports.d.ts 파일이 생성되는지 확인.

전역 모듈 타입 파일이 생성됨

import 구문없이 ref 모듈 사용

관련 내용

vue 프로젝트에서 unplugin 패키지 사용할 때 늘 같이 설정해주는 것이 unplugin-vue-components 이다.

관련해서 정리 해놓은것은 여기서 참조.