Vite 사용법

Vite 사용법

 

Vite는 현대 웹 개발을 위한 빌드 도구로, 빠른 개발 환경을 제공하는 것이 특징입니다. Vite는 ES 모듈을 기반으로 하여, 개발 중에는 즉시 모듈을 로드하고, 프로덕션 빌드 시에는 최적화된 번들을 생성합니다. 이로 인해 개발자는 빠른 피드백을 받을 수 있으며, 효율적인 작업이 가능합니다.

Vite의 주요 특징

• 빠른 시작: Vite는 개발 서버를 즉시 시작할 수 있어, 빠른 개발 사이클을 지원합니다 
• ES 모듈 지원: Vite는 ES 모듈을 기본으로 하여, 최신 자바스크립트 기능을 활용할 수 있습니다 
• 핫 모듈 교체(HMR): 코드 변경 시 페이지를 새로 고치지 않고도 변경 사항을 즉시 반영할 수 있습니다 
• 최적화된 빌드: 프로덕션 환경에서는 코드 스플리팅과 트리 쉐이킹을 통해 최적화된 번들을 생성합니다 

Vite로 프로젝트를 생성 후 바닐라자바스크립트 템플릿으로 설치하는 방법

Vite를 바닐라 자바스크립트 프로젝트에서 사용하는 방법은 다음과 같습니다.

1. Vite 설치

- npm을 사용하여 Vite 설치:

npm create vite@latest

이 명령어를 입력하여 프로젝트 이름을 입력하고 바닐라 자바스크립트를 선택합니다.

2. 프로젝트 설정

- 프로젝트 디렉토리로 이동:

cd [프로젝트 이름]

- 의존성 설치:

npm install

여기까지 진행하면 폴더 구조가 아래와 같이 됩니다.

vite 파일 구조

my-project/
├── index.html        # 진입점 HTML 파일
├── src/              # 소스 코드 디렉터리
│   └── main.js       # 메인 JavaScript 파일
├── vite.config.js    # Vite 설정 파일
└── package.json      # 프로젝트 종속성 및 스크립트 정의

3. 개발 서버 시작

- 개발 서버 실행:

npm run dev

 

이 명령어를 실행하면 로컬 개발 서버가 시작되고, 기본적으로 **http://localhost:5173**에서 프로젝트를 확인할 수 있습니다. 

4. 프로덕션 빌드

- 프로덕션 빌드 생성:

npm run build

이 명령어를 통해 최적화된 프로덕션 빌드를 생성할 수 있습니다.

npm run build 명령어를 실행하면 Vite는 최적화된 프로덕션 빌드를 생성하고, 일반적으로 dist라는 디렉토리에 결과물을 저장합니다.

빌드된 프로젝트를 확인하는 여러 방법을 소개합니다.

- dist 디렉토리로 이동한 뒤 npm run preivew 명령어 실행

- VS Code의 Live Server 확장 프로그램을 사용 : dist 디렉토리로 이동한뒤 index.htlm 파일을 마우스 오른쪽 버튼으로 클릭하고, "Open with Live Server"를 선택합니다.

 

이미 만들어진 프로젝트 내에 Vite를 수동 설치 하는 방법

 

프로젝트 만들기

npm init -y

vite 설치

npm install -D vite

수동으로 설치하는 경우 폴더 구조를 직접 만들어줍니다.

 

vite.config.js

프로젝트 루트 내에 있는 설정 파일이다. 번들러를 실행하는 데 있어 필요한 다양한 설정을 할 수있습니다.

 

 

https://ko.vite.dev/

Vite