Vite
Next generation frontend tooling. It's fast!
Vite (프랑스어 "fast", 발음: /vit/
)는 프론트 엔드 개발 경험을 크게 향상시키는 새로운 유형의 프론트 엔드 빌드 도구입니다.
Categories
- Vite:Config (vite.config.js)
- Vite:CLI
- Vite:DependencyPreBundling
- Vite:StaticAssetHandling
- Vite:Building (for Production) - 라이브러리 프로젝트 만드는 방법 포함됨.
- Vite:DeployingStaticSite
- Vite:EnvVariables
- Vite:Modes
- Vite:ServerSideRendering (SSR)
- Vite:BackendIntegration
- Vite:CreateLibraryProject - FE 라이브러리 프로젝트 만드는 방법
Vite:Plugins
TypeScript type export:
Features
장점
- Webpack/Parcel 보다 10~100배 빠른 Go 기반 esbuild 와 ESM을 이용
- HMR(Hot Module Reloading)으로 변경된 모듈만 빠르게 적용 & 리렌더링 되어 프로토타이핑을 정말 빠르게 해줌
Vue의 publicPath 설정
Vite:Config 항목 참조. 간단히, base
옵션을 사용하면 된다. vue.config.js가 아닌, vite.config.js를 사용한다.
Vite CJS Node API 사용 중단
Node API를 이용한 CJS 빌드는 더 이상 지원되지 않으며 Vite 6에서 제거될 예정입니다. 자세한 내용은 GitHub discussion을 참조하세요. 파일 또는 프레임워크를 업데이트하여 ESM 빌드를 가져오도록 해야 합니다.
표준 Vite 프로젝트에서 다음을 확인해 주세요:
- vite.config.js 파일에서 ESM 문법을 사용하고 있습니다.
- 가장 가까운 package.json 파일 다음을 확인:
-
"type": "module"
이 있거나 -
.mjs
또는.mts
확장자 (예:vite.config.mjs
또는vite.config.mts
)를 사용.
-
Troubleshooting
Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension
간단히 #Vite CJS Node API 사용 중단 항목 참조.