vite의 특징에 대해서 알아보자.
Native ES import는 bare module imports를 지원하지 않는다.
import { someMethod } from 'my-dep'
위 코드는 브라우저에서 오류가 발생한다. vite는 제공되는 모든 소스파일에서 이러한 bare imports를 감지하고 다음을 수행한다.
CommonJS / UMD
모듈을 ESM 으로 변활할 수 있으며 esbuild를 통해 수행한다. 콜드 트스타트시간이 다른 번들러보다 훨씬 빠르다.vite는 기본 ESM을 통해 HMR API를 제공한다. HMR 기능이 있는 프레임워크는 API를 활용하여 페이지를 다시 로드하거나 애플리케이션 상태를 날리지 않고 즉각적인 업데이트를 제공한다.
create-vite
를 통해 생성한 템플릿 에서는 수동으로 설정할 필요가 없다.
.ts
파일에 대해서만 트랜스파일을 수행하며 타입 검사를 수행하지 않는다.
vite의 역할은 소스 모듈을 브라우저에서 최대한 빠르게 실행하는 형태로 변환하는 것이다.
이를 위해 트랜스폼 파이프라인에서 정적 분석 검사를 분리하는것이 좋다.
esbuild로 인하여 바닐라 tsc보다 20~30배 빠른 속도로 트랜스파일 하며, HMR 업데이트는 50ms 이내에 브라우저에 반영될 수 있다.
참고로 타입만을 가져오는 경우 잘못 번들링이 될 수 있으며, 이는 타입 전용 Imports와 Exports를 사용하여 이 문제를 우회할 수 있다.
tsconfig.json
의 compilerOptions
에 있는 구성 필드를 수정 시 주의해야한다.
true
로 설정되어 있어야 한다.tsconfigl.json
내 compilerOptions
설정의 isolatedModules: true
와 같이 설정해줘야만 하며, 이 설정으로 TS가 위와 같은 상황에서 작동하지 않는 기능들에 대해 경고할 수 있게 된다.true
가 된다.true
값을 요구한다.false
로 값을 바꾸어 주어야 한다.extends
importsNotUsedAsValues
preserveValueImports
jsxFactory
jsxFragmentFactory
기존 코드에서 isolatedModules : true
마이그레이션 작업이 어려운 작업이라면 타사 플러그인을 사용하여 문제를 해결할 수 있다. ex) rollup-plugin-friendly-type-imports 그러나 이 방법은 공식적으로 지원되지 않는다.
vite는 기본적으로 Node.js API 기반의 타입 시스템을 사용한다.
클라이언트 측 코드의 환경을 변경하려면 d.ts
파일을 추가해야 한다.
// vite-end.d.ts
<reference types="vite/client" />
혹은 tsconfig.json
내부의 compilerOptions
의 types
속성의 값으로 ["vite/client"]
을 넣어주어도 된다.
{
"compilerOptions": {
"types": ["vite/client"]
}
}
위 설정은 다음에 대한 Shim이 제공된다.
1. svg
와 같은 에셋
2. vite를 통해 주입되는 import.meta.env
에서 명시된 환경변수 타입들
3. import.meta.hot
에 명시된 HMR API 타입들
기본 타입을 재정의 하기 위해서는 타입 정의 파일을 만든 뒤 해당 타입 파일에 대한 참조를 추개햐아 한다.
*.svg
의 기본적인 import 결과를 React 컴포넌트로 만들기 위해서는 다음과 같은 작업을 한다.
// vite-env-override.d.ts 타이핑을 포함하는 파일
declare module '*.svg' {
const content: React.FC<React.SVGProps<SVGElement>>
export default content
}
// vite/client 에 대한 참조를 포함하는 파일
<reference types="./vite-env-override.d.ts" />
<reference types="vite/client" />
vite는 postcss-import
를 이용해 CSS의 @import
를 처리한다.
또한 가져온 파일이 다른 디렉터리에 있더라도 모든 CSS url()
참조는 정확성을 보장하기 위해 항상 자동으로 리베이스 된다.
@import
별칭과 URL리베이스는 Sass 및 Less 파일에도 지원된다.
링크참조 CSS 전처리기 링크