[Vite] Vite

팀프로젝트를 진행하면서 cra가 아니고 vite를 이용해서 개발환경을 구축했는데 cra보다 vite가 실행속도가 더 빨라서 앞으로 Vite를 사용해보려고 한다.

참고 : vite를 사용해야 하는 이유

 

프로젝트 생성하기

// npm
npm create vite@latest

// yarn
yarn create vite

프로젝트 이름과 템플릿을 지정해서 프로젝트를 생성할 수 있다.

// npm 6.x
npm create vite@latest my-react-app --template react-ts
npm create vite@latest my-react-app --template react

// npm 7+, '--'를 반드시 붙여주세요
npm create vite@latest my-react-app -- --template react-ts
npm create vite@latest my-react-app -- --template react

// yarn
yarn create vite my-react-app --template react-ts
yarn create vite my-react-app --template react

 

명령어를 입력하면 프로젝트 폴더가 생성되고 npm i로 패키지들을 설치해주면 된다.

 

 

 

지원하는 기능들

vue, react, typescript 등을 지원하며 css와 css module도 import하여 사용하면 된다.

css 전처리기는 지원하지 않기때문에 설치해서 사용하면 된다.

// .scss 그리고 .sass
npm add -D sass

// .less
npm add -D less

// .styl 그리고 .stylus
npm add -D stylus

 

json파일도 바로 import할 수 있다.

// 객체 형태로 가져오기
import json from './example.json'
// 필드를 지정해 가져오기 (트리-쉐이킹 됩니다.)
import { field } from './example.json'

 

배포하기

배포할 때 다시 살펴봐야겠다.

https://vitejs-kr.github.io/guide/static-deploy.html#github-pages-and-gitlab-ci

Vite

 

환경변수

환경변수도 사용할 수 있다.

https://vitejs-kr.github.io/guide/env-and-mode.html

Vite