개요

Vite(프랑스어로 "빠르게"를 의미)는 Evan You가 만든 최신 JavaScript 번들러입니다. Vite는 Vue.js의 개발자인 Evan You에 의해 만들어졌으며, Vue.js 프로젝트에 최적화되어 있습니다. 그러나 다른 프레임워크 또는 라이브러리와도 사용할 수 있습니다. Vite는 Vue.js 3와 함께 사용할 때 가장 잘 동작합니다.

주요 특징

ES 모듈 기반 개발 서버: Vite는 ES 모듈을 기반으로 한 개발 서버를 제공합니다. 이는 개발 중에 빠른 빌드와 라이브 리로딩을 가능하게 합니다. 각 모듈은 개별적으로 서빙되므로 빌드 속도가 빠릅니다.
빠른 핫 모듈 교체(HMR): Vite는 빠른 핫 모듈 교체(HMR)를 제공하여 코드 변경 시 브라우저를 새로 고치지 않고도 빠르게 변경 사항을 볼 수 있습니다.
ESBuild를 기반으로 하는 번들러: Vite는 ESBuild를 사용하여 빠르고 효율적인 번들링을 제공합니다. 이는 빌드 속도가 매우 빠르다는 것을 의미합니다.
모듈 프리컴파일링(Pre-Bundling): Vite는 모듈을 실시간으로 프리컴파일하여 첫 번째 요청 시간을 줄이는 것으로 모듈을 바로 처리합니다.
플러그인 시스템: Vite는 플러그인 기반의 아키텍처를 제공하여 커스터마이징이 용이합니다.

사용방법

프로젝트 초기화 및 의존성 설치: 프로젝트 폴더에서 다음 명령어로 프로젝트를 초기화하고 Vite와 관련 의존성을 설치합니다.
```
bashCopy code
npm init vite@latest
cd <project-name>
npm install
```
개발 서버 실행: 다음 명령어를 사용하여 Vite 개발 서버를 실행합니다.
```
bashCopy code
npm run dev
```
빌드: 프로덕션 빌드를 생성하려면 다음 명령어를 실행합니다.
```
bashCopy code
npm run build
```

Vite 설정 변경: 필요에 따라 vite.config.js 파일을 편집하여 Vite의 동작을 변경하고 커스터마이징할 수 있습니다.

자세한 설정은 다음을 확인 → Vite 환경변수들

import { defineConfig } from "vite";
import dts from "vite-plugin-dts";
import { peerDependencies } from "./package.json";

export default defineConfig({
  build: {
    lib: {
      entry: "./src/index.ts", // Specifies the entry point for building the library.
      name: "vite-react-ts-button", // Sets the name of the generated library.
      fileName: (format) => `index.${format}.js`, // Generates the output file name based on the format.
      formats: ["cjs", "es"], // Specifies the output formats (CommonJS and ES modules).
    },
    rollupOptions: {
      external: [...Object.keys(peerDependencies)], // Defines external dependencies for Rollup bundling.
    },
    sourcemap: true, // Generates source maps for debugging.
    emptyOutDir: true, // Clears the output directory before building.
  },
  plugins: [dts()], // Uses the 'vite-plugin-dts' plugin for generating TypeScript declaration files (d.ts).
});

플러그인 추가: 필요한 경우 Vite 플러그인을 추가하여 프로젝트를 확장하고 기능을 추가할 수 있습니다.
Vue.js 프로젝트 구성: Vite는 Vue.js와 특히 Vue 3와 함께 사용할 때 가장 잘 동작합니다. Vue.js 프로젝트를 구성할 때는 Vue CLI 대신 Vite를 사용할 수 있습니다.

Vite는 빠른 개발 및 빌드 시간, 간단한 설정 및 최신 JavaScript 표준에 따른 기능을 제공하여 모던 웹 개발을 위한 훌륭한 도구입니다.