vite, webpack 등은 웹개발 번들링 툴입니다.
Vite vs Webpack
비교적 신생 vite 가 webpack 보다는 수치상으로는 당연히 뒤처질수 밖에 없다고생각합니다만
저도 webpack 한참 공부하고, 또 vite 공부해야되? 라는 생각에 거부감이 좀 있었지만, 틈틈히 사용해보면서 webpack 보다 간편하고 빠른 사용경험을 했고, 충분히 공부할 가치가 있다고 생각했습니다.
풍부한 템플릿
1. CLI
- 커맨드라인으로 선택하면서 간편히 구성할 수 있습니다.
npm create vite@latest
2. template
- 옵션으로 바로 완성된 템플릿을 불러 올 수 있습니다.
3. 커뮤니티 템플릿
- 공식으로 제공하는 템플릿 외 커뮤니티에서는 더 많은 개발환경 세팅을 제공합니다.
vite dev server
1. %PUBLIC_URL% 을 사용할 필요 없이 자동으로 주소를 rebase 합니다.
2. URL 은 프로젝트의 루트 dir 입니다.
vite dev 서버는 일반적인 http 서버처럼 동작하기 때문에 현재 루트dir 으로부터 모든 파일을 전송합니다.
index.html 은 URL에서 생략할 수 있습니다.
또한 루트 외부의 디렉토리도 서빙하기 때문에 모노 시스템에서도 사용할 수 있습니다.
npm script
{
"scripts": {
"dev": "vite", // start dev server, aliases: `vite dev`, `vite serve`
"build": "vite build", // build for production
"preview": "vite preview" // locally preview production build
}
}<script/> tag
vite는 기본적으로 ts를 인식하기 때문에 브라우저에서 바로 .ts 파일을 삽입할 수 있습니다.
하지만 인식만 할 뿐 타입체크는 하지 않기 때문에 tsconfig를 직접 설정해 주어야합니다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script type="module" src="/src/index.ts"></script>
</body>
</html>+ CLI option
포트설정, https 등 cli 옵션도 제공합니다
https://vitejs.dev/guide/cli.html
가볍게 실행해보기
위예제처럼
1. npm i vite
2. script 추가
3. index.html 생성 및 index.js or index.ts 연결
4. npm run dev
의 단계를 거치면 바로 개발환경을 구축할 수 있습니다.
개발이 끝나고서 npm run build 후 dist 폴더에 번들링된 결과물을 바로 사용하면 됩니다.
'FE > vite' 카테고리의 다른 글
| [vite] 프론트엔드 개발자를 위한 Vite 101 (0) | 2023.10.10 |
|---|---|
| vite 환경변수 (0) | 2023.01.13 |
| vite 빌드하기 (0) | 2023.01.09 |
| vite 가 CSS, Static Assets, JSON, Dynamic Imports를 처리하는 방법 (0) | 2023.01.09 |
| vite의 module 처리와 typescript 설정 살펴보기 (0) | 2023.01.09 |
