코린이[코딩 어린이]

ES모듈을 하나의 번들로 컴파일하는 작업을 진행하기 위해서 다음 명령어를 입력한다.

$ npm run build

Vite는 기본적으로 Rollup을 이용하여 번들을 생성한다. 별다른 설정이 없다면 dist폴더가 생성되고 그 아래에 번들화된 js, html, css, asset파일들이 생성된다.

Vite의 개발서버는 웹 애플리케이션을 개발하는 과정에서 매우 유리하지만 실제 서버 환경에 애플리케이션을 배포하기 위해서는 번들을 생성하여 그 크기를 줄이고 자바스크립트의 코드를 최소화하는 것이 네트워크 속도나 보안 면에서 좋다.

Vue3 Vite란 ?

Vite는 에반 유가 Vue3로 개발을 함에 있어 별다른 번들 생성 없이 ES Module을 바로 웹 브라우저에 렌더링 할 수 있도록 만든 개발 툴로서 매우 빠른 HMR(Hot Module Replacement)을 제공한다. 번들을 생성하는 과정이 필요 없어 서버의 시작속도가 매우 빠르며, 개발자 역시 번들없이 모듈화된 컴포넌트의 수정사항을 브라우저로 볼 수 있다.

Vite는 Vue3를 주요 프레임워크로 지정하고 개발된 만큼 Vue프로젝트와 완벽한 호환성을 자랑한다. 특히 ECMAScript6를 따르는 Vue3의 모듈이 별다른 컴파일 과정 없이 브라우저에 렌더링 될 수 있게 해주는 기능은 Vue를 이용한 개발을 매우 쉽게 해준다.

프로젝트 생성하기

$ npm init @vitejs/app project-name

생성이 완료되면 폴더가 생성되고 Vue로 프로젝트를 진행할 때 필요한 필수 요소들이 생성된다.

package.json

{
  "name": "vite-project",
  "private": true,
  "version": "0.0.0",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "vue": "^3.2.25"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^2.3.3",
    "vite": "^2.9.9"
  }
}

이제 package.json이 들어 있는 프로젝트 폴더에서 npm명령어를 수행하여 필요한 의존 패키지를 설치한다.

$ npm install

node_modules폴더가 생기며 많은 패키지들이 설치된다.

실행하기

$ npm run dev

npm run dev를 수행하면 package.json 내 script속성에 명시된 vite가 npx를 통해서 실행이 된다.