웹팩에서 vite로 초기세팅 변경

[Yenowme]

vite 설정

• wepack에서 vite로 클라이언트 초기세팅 변경 (리액트 타입스크립트)

checkList

주의사항

[nyeoni]

Vite 공식 페이지 https://vitejs.dev/

[Yenowme]

허광남 멘토님 설명 페이지 https://okdevtv.com/mib/vite

[nyeoni]

Vite 란?

Vite 의 문제인식 및 장점

Javascript modules 시스템을 사용하기 위해 Webpack, Rollup, Parcel 과 같은 다양한 번들러들이 나타났다. 그러나 이러한 번들러들을 사용할때 큰 프로젝트일 수록 트랜스파일의 시간이 많이 들고 dev server 새로고침 등과 같은 비효율성을 낳았었다. Vite 는 Webpack 을 기반으로 하지 않으며 브라우저에서 네이티브 ES 모듈을 활용하는 자체 개발 서버를 가지고 있다. 또한 웹팩의 개발 서버보다 훨씬 더 빠른 속도를 제공하고 빌드를 위해 Rollup 을 사용하여 빠른 속도를 더해준다.

PS)

• Vite 는 Webpack 보다 10배 더 빠르다
• Vite 는 Vue.js 의 개발자 Evan You 가 만들었다.

Webpack 과 Vite 의 비교

Webpack 의 Bundle based dev server

Vite 의 Natvie ESM based dev server

[kenu]

이거 좀 재밌어요. JavaScript 번들러로 본 조선시대 붕당의 이해

image from: https://wormwlrm.github.io/2020/08/12/History-of-JavaScript-Modules-and-Bundlers.html

[Yenowme]

의문점

• [ ] vite 커맨드로 초기세팅 후 .babelrc가 보이지 않는다. 따로 생성해줘야하나?

[kenu]

Let's google it! https://www.google.com/search?q=babel+vite

[nyeoni]

Vite - ESbuild https://vitejs.dev/guide/features.html#jsx https://esbuild.github.io/content-types/#jsx

[Yenowme]

78 done