• 트랜스 파일과정
  • css에 prefix를 붙여준다.
  • sass를 쓸 수 있게 도와줌
  • tailwind 쓸 . 수있게 도와줌
  • react를 쓸때, jsx확장자로 되어있는 파일을 트랜스파일해서 실제 브라우저가 알아들을수 있는 .js파일로 바꿔준다.
• 번들을 하나로 묶어준다.
• HMR → hot module reload (dev server에서 지원)
  • 이 폴더의 파일이 바뀌는지 지켜보고, 바뀌었다면 페이지에 리프레쉬 시켜준다.
  • 그들 나름대로 최선을 다해서, 페이지 전체 리프레쉬를 하는게아니고, 바뀌는 부분만 바꿔준다.

vite + ts

• 타입스크립트는 브라우저가 이해할수 없는 언어이다.
• vite build 프로세스 중에 타입스크립트를 자바스크립트로 트랜스파일링해주는 과정이 포함되어잇다.
• HMR 지원을 함.

Vite

• react코드를 js로 트랜스 파일링

• process.env.NODE_ENV 값을 읽어서 치환 예시코드

  • 우리가 작성한 코드

    console.log(process.env.NODE_ENV);
    

  • vite가 트랜스파일링 한 코드

    console.log("production")
    

• yarn dev를 했을때의 과정

  1. 전체 내 프로젝트를 build하게 된다. (yarn build를 한것과 거의 똑같은 과정 + NODE_ENV=development)
     • 내 프로젝트의 모든 파일들을 트랜스 파일링 한다. (jsx, ts 등등)
  2. build된 static한 파일들을 브라우저에 로드한다.

• vite의 dev server 실행

  • 기존 번들러들 : 모든 라우터들을 돌면서 모든 파일들을 번들링한다. (배포때랑 똑같음)
  • vite : 실제로 사용하는 파일들만 번들링한다.
  • 변동사항이 있는 코드들만 반영하여 빠르다.