DEV Community

NeNoVen
NeNoVen

Posted on

Vite

Vite 프랑스어로 "빠르다" 라는 뜻을 가진 단어.
차세대 프론트엔드 개발 도구.
이름처럼 빌드와 개발 서버 구동 시간이 매우 빠름.

Webpack, Parcel 등과 비교하면 10배 이상의 빠른 속도.

Vite를 이용해 리액트 프로젝트 생성하는 방법.

nom init vite 프로젝트명 -- --template react
yarn create vite 프로젝트명 -- --template react
Enter fullscreen mode Exit fullscreen mode

타입스크립트

npm init vite 프로젝트명 -- --template react-ts
yarn create vite 프로젝트명 -- --template react-ts
Enter fullscreen mode Exit fullscreen mode

디렉토리 구조

  • src : 자바스크립트와 타입스크립트 코드를 작성하는 디렉토리. 진입 파일은 main.tsx or main.jsx

  • public : 정적 파일과 리소스를 이곳에 작성.

  • dist : 빌드 후 생성된 산출물이 저장되는 디렉토리.

빌드 명령어

npm run build
yarn build
Enter fullscreen mode Exit fullscreen mode

개발 서버 시작 명령어

npm run dev
yarn dev
Enter fullscreen mode Exit fullscreen mode

Top comments (0)