Vite

Vite(yes 비트 not 바이트)는 프랑스어로 "빠르다"를 의미한다. 빠르고 간결한 개발 경험에 초점을 맞춘 빌드 도구로, 다음과 같은 특징을 가진다.

1. 네이티브 ESM을 사용하여 빠른 개발 서버를 시작한다.
2. HMR(Hot Module Replacement)은 코드 변경 시, 변경된 모듈만 업데이트하여, 더 빠른 피드백을 받을 수 있도록 해 준다.
3. 추가적인 모듈 설치 없이 TypeScript, JSX, CSS 등을 사용할 수 있다.
4. 빌드 최적화
5. 개발 서버와 빌드 과정에서 모두 사용 가능한 Rollup 플러그인 인터페이스를 제공한다.

Vite는 플러그인 등을 통해, 프레임도구 지원이나, 다른 도구와의 통합이 가능하다. 또한 esnext를 변환 대상으로 하여 빌드를 수행하기 때문에 하위 호환을 생각하지 않아도 된다.

설치

npm create vite@latest

위 커맨드를 실행해 준다.
그 뒤로는 프레임워크 등의 설정을 개발자의 취향(react, vue-ts ...)에 맞게 설정할 수 있다.

create된 vite 프로젝트에는 index.html 파일이 프로젝트의 루트에 위치해 있다.

이는 추가적 번들링 과정 없이, index.html 파일이 앱의 진입점이 되게끔 하기 위함이다. 여러 html 파일을 앱의 진입점으로 하는 Multi-page apps를 지원한다.

zsh: command not found: vite

vite를 설치해 준 다음에 npm run dev를 해주면 위와 같은 에러가 발생하면서 실행이 되지 않는다.

npm install 

로 번들을 설치해 주면 정상적으로 동작한다.