Vite⚡ - Vue 노번들러 개발 설정

분명히 Evan You(Vue.js 작성자)는 어느 날 밤 잠을 자는 데 관심이 없었고 Vite 을(를) 만들었습니다.






에반 유


@youyuxi






잠자리에 들 때 번들러가 없는 개발 설정(네이티브 브라우저 ES 가져오기 사용)에 대한 아이디어가 있었지만 **핫 리로드**가 있는 Vue SFC를 지원합니다. 이제 거의 오전 6시이고 PoC가 작동 중입니다. 핫 리로드가 너무 빨라 거의 즉각적입니다.


오전 09:54 - 2020년 4월 20일





147

1627년



Vite를 사용하면 번들 단계 없이 단일 파일 구성 요소로 Vue 애플리케이션을 개발할 수 있습니다. 가져오기는 기본 ES 모듈 가져오기로 브라우저에서 요청합니다. dev 서버는 .vue 파일에 대한 요청을 가로채서 즉시 컴파일합니다. 그리고 즉시 빠릅니다.

Vite는 실험적이라는 점에 유의하십시오. ⚠️ Vite의 미래가 무엇인지 또는 이 기사가 얼마나 유효한지 모르겠습니다. 그러나 이것을 미래의 간식이자 재미있는 것으로 생각하십시오.

시도해 봅시다

다음 파일 생성

Comp.vue

<template>
  <button @click="count++">⚡ {{ count }}</button> 
</template>

<script>
export default {
  data: () => ({ count: 0 })
}
</script>

<style scoped>
button{
  font-size: 2rem;
}
</style>

index.html

<div id="app"></div>
<script type="module">
  import { createApp } from 'vue'
  import Comp from './Comp.vue'

  createApp(Comp).mount('#app')
</script>

그런 다음 다음을 실행합니다.

npx vite

http://localhost:3000로 이동하고 .vue 파일을 편집하여 핫 리로드된 변경 사항을 확인합니다.

프로덕션용 번들

이제 프로덕션 준비가 된 앱을 빌드해 보겠습니다.

패키지.json 만들기

{
  "scripts": {
    "build": "vite build"
  }
}

운영

npm i -D vite
npm run build

코드의 dist 폴더를 확인하십시오.

내가 우연히 발견 한 문제.

오류: 'tslib' 모듈을 찾을 수 없습니다.

수정: npm i -D tslib

오류: ENOENT: 해당 파일 또는 디렉터 없음

수정: 빈 dist 폴더를 수동으로 생성

생각

시작하기가 정말 쉬웠고 변경 사항을 즉시 확인할 수 있으므로 개발 프로세스가 정말 빠릅니다. 즉석에서 컴파일하는 것과 같습니다. 그래서 이것은 정말 유망해 보입니다. 언젠가는 이것이 우리가 모든 Vue 프로젝트를 개발하는 방식이 될 것입니다.

Evan You, 계속 마법을 부리세요 🧙

재미있는 사실: vue = 프랑스어로 보기, vite = 프랑스어로 빠르게.

편집: Vite는 현재 종료된 것으로 보이며 Vue 3가 출시된 후에 선택될 것/수 있습니다. 하지만 오늘 Vue 3 베타를 사용해보고 싶다면 이것이 가장 쉬운 방법입니다.

Edit2: Evan You의 말을 바탕으로 결론지었다고 했습니다. repo에 대한 commits을 보면 아직 작업 중인 것 같습니다 😃.