소스 코드를 통해 Vite 탐색

vite, evan 당신의 혁신적인 빌드 도구는 vue.js, requt.js, svelte.js 및 plain javaScript를 지원하는 프레임 워크-공연입니다. 이 기사는 표면 수준의 개요를 넘어 Vite의 소스 코드를 탐색하여 템플릿과 플러그인 시스템을 이해합니다. 템플릿과 플러그인의 차이점을 명확히하고 Vite의 코어가 플러그인과 어떻게 상호 작용하는지 살펴 보겠습니다. 주요 개념 :

Vite의 프레임 워크 독립성 독립성은 템플릿과 플러그인 아키텍처에서 비롯되어 다양한 프레임 워크에서 프로젝트 생성을 가능하게합니다. vite는 기본 번들링 용 롤업을 활용하고 모듈 호환성 및 최적화를위한 esbuild를 사용하여 탁월한 속도를 초래합니다. vite 프로젝트 생성에는 도구를 사용하여 프로젝트 이름과 템플릿을 선택해야합니다. 프레임 워크 별 템플릿은 후크 기반 아키텍처를 사용하여 구축 된 해당 플러그인에 의존합니다.

vite가있는 vue 앱 구축 : 를 설명하려면 vue 프로젝트를 만들어 봅시다 : (

사용은 항상 최신 버전을 갖도록합니다.) 또는 속기를 사용하십시오 : .

이번 발사
• 는 프로젝트 이름과 템플릿을 제공합니다. 이름을 선택하고 템플릿으로 "바닐라"또는 "vue"를 선택하십시오.
• create-vite vite 소스 코드 탐색 :
vite의 github 저장소 (github.com/vitejs/vite)로 이동하여 디렉토리를 검사하십시오. (더 이상 사용되지 않음) 및

가 핵심입니다. 에는 내장 프로젝트 템플릿이 있습니다. 내장 플러그인 용 플러그인 디렉토리도 있습니다 템플릿 vs. 플러그인 :

템플릿 : 새 프로젝트의 스타터 코드. 내에 위치한 프레임 워크 별 파일 구조 (예 : , )를 제공합니다.

<code class="language-bash">npm init vite@latest</code>

플러그인 :

vite의 프레임 워크를 활성화합니다. @latest 디렉토리 (예 : , )에서 발견되면 프레임 워크 별 프로세싱을 처리합니다.

<code class="language-bash">npx create-vite</code>

템플릿은 종종 플러그인을 사용합니다. 예를 들어, VUE 템플릿에는

플러그인이 vue 단일 파일 구성 요소 (SFCS)를 처리하려면 플러그인이 필요합니다. 및 @vitejs/plugin-vue의 파일을 비교하면이 종속성이 나타납니다.

package.json template-vanilla 에는 template-vue,

및 가 포함되어 Vue 지원을 활성화합니다. 는 vite의 핵심과 vue.js. vue 플러그인 :

vue 프로젝트 번들링을 처리하여 후크를 통해 롤업을 위임합니다. 이 후크는 플러그인 코드가 실행되는 지점을 정의합니다 의 스 니펫은 후크 구현을 보여줍니다 vite의 코어 (예 : )는 롤업을 사용 하여이 플러그인을 통합합니다 롤업 대 ESBUILD :

vite는 롤업 (메인 번들링) 및 esbuild (모듈 변환 및 최적화-"종속성 프리 묶음")를 모두 사용합니다. Esbuild의 속도는이 성능 과정에 이상적입니다. template-vue vue @vitejs/plugin-vue 요약 : @vue/compiler-sfc 이 탐사는 Vite의 아키텍처를 보여줍니다. @vitejs/plugin-vue 템플릿 관리; 후크 기반 시스템을 사용하는 프레임 워크 별 플러그인은 Esbuild 최적화 모듈 처리와 함께 롤업을 통해 Vite의 코어와 통합됩니다. 이 조합은 Vite의 속도와 유연성을 제공합니다

자주 묻는 질문 (faqs) :

(원래 FAQ는 이미 잘 작성되고 포괄적입니다. 변경 사항이 필요하지 않습니다.)

위 내용은 소스 코드를 통해 Vite 탐색의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!