vite

Vite란

빠르고 간결한 모던 웹 프로젝트 개발 경험에 맞춰 탄생한 빌드 도구이며, 두가지 컨셉을 중심으로 한다.

• 개발시 네이티브 ES Module을 넘어 다양한 기능을 제공한다.
• 번들링 시 rollup기반의 다양한 빌드 커맨드를 사용할 수 있습니다. 이는 높은 수준으로 최적화된 정적 리소스들을 배포할 수 있게끔 하며, 미리 정의된 설정(pre-configured)을 제공합니다.

지원하는 브라우저

기본적으로 네이티브 ES 모듈, 네이티브 ESM의 동적 Import, 그리고 import.meta를 지원하는 브라우저를 타깃으로 빌드를 수행합니다. 레거시 브라우저는 @vitejs/plugin-legacy 플러그인을 통해 지원이 가능합니다.

index.html 그리고 프로젝트의 루트

만들어진 vite 프로젝트를 유심히 보면 index.html파일이 public 디렉터리가 아닌, 프로젝트의 루트에 위치해 있다는 것을 발견할 수 있습니다. 의도적으로 이렇게 위치시킨 것인데, 추가적인 번들링 과정 없이 index.html 파일이 앱의 진입점이 되게끔 하기 위함입니다.

vite는 index.html 파일을 소스코드이자 javascript 모듈 그래프를 구성하는 요소 중 하나로 취급하고 있습니다. 다시말해,

vite는 정적 http 서버와 비슷하게 "루트 디렉터리" 라는 개념을 가지고 있습니다. 향후 라는 이름으로 문서 내에서 보게 되는데, 이는 Absolute URL을 프로젝트 루트로 가리키게끔 함으로서 일반적인 파일 서버와 동일하게 코드를 작성할 수 있게 됩니다.

또한 vite는 여러 .html 파일을 앱의 진입점으로 하는 multi-page apps를 지원하고 있습니다.

프로젝트 루트 지정
vite은 개발 서버를 시작할 때 현재 위치해 있는 디렉터리를 프로젝트 루트로 가정하고 동작합니다. 만약 특정 디렉터리를 지정해 프로젝트 루트로써 동작하게끔 하고 싶다면, vite serve some/sub/dir 명령으로 Vite를 시작해주세요. 참고로 Vite는 프로젝트 루트 내에서 설정 파일(vite.config.js)을 확인하기에, 프로젝트 루트가 변경된다면 해당 파일도 함께 옮겨줘야 합니다.