비타민 E를 왜 써요?

머리말

최근에 사용하기 시작했는데Vite Vite의 속도가 얼마나 빠른지 놀랐다.그래서 오늘 Vite를 어떻게 사용하는지, 그리고 왜 사용하는지 토론할 것입니다.새로운 Vite 프로젝트를 만드는 것이 얼마나 쉬운지 보게 될 것입니다. 다른 패키지를 사용하듯이 의존 항목을 사용할 수도 있습니다.마지막으로 Vite 프로젝트를 배포하는 것이 얼마나 쉬운지 살펴보겠습니다.

비트

Vite는 Evan You(그도 Vuejs를 만들었다)가 만든 차세대 전단 도구다.다른 모듈 패키지 (패키지, 웹 패키지 등) 와 구분할 수 있는 좋은 기능들이 있다.

특징.

💡 즉시 서버 시작
네이티브 ESM을 통해 번들 없이 주문형 파일 서비스를 제공합니다!
⚡️ 번개 같은 HMR.
HMR(Hot Module Replaceable)은 어플리케이션 크기에 상관없이 빠른 속도를 유지합니다.
🛠️ 다양한 기능
TypeScript, JSX, CSS 등에 대한 기존 지원
📦 최적화 구축
미리 설정된 집합 생성으로 여러 페이지와 라이브러리 모드를 지원합니다.
🔩 일반 플러그인
개발자와 구축자가 공유하는 통합 플러그인 인터페이스.
🔑 모든 API 유형
전체 TypeScript 유형을 포함하는 유연한 프로그래밍 API

새 프로젝트 설정

NPM 지원:

npm init @vitejs/app

실을 쓰다

yarn create @vitejs/app

그리고 프로젝트에 이름을 붙이고 어떤 창고로 프로젝트를 구축하고 싶은지 선택하십시오. 많은 선택이 있습니다.이 강좌에서, 우리는 vanilla js를 사용할 것이다.

? Select a framework:
> *vanilla*
 > *vanilla*
   vanilla ts
vue
react
react
preact
lit-element
svelte

그리고 디렉터리를 이 폴더로 변경하고 노드 모듈을 설치하고 dev 서버를 시작합니다.

cd *your project name*
npm install
npm run dev

프로젝트가 Vite를 사용하여 성공적으로 만들어졌습니다. Parcel이나 웹 패키지보다 Vite를 사용하여 프로젝트를 만드는 속도가 얼마나 빠른지 알 수 있습니다.

폴더 구조

만약 우리가 Vite 프로젝트의 폴더 구조에 대해 이야기한다면, 그것은 매우 간단할 것이다

node 모듈 폴더가 있으니 터치할 필요가 없습니다

그럼 색인이 하나 있어요.html 파일,main.js 파일 및 스타일.css 파일

프로젝트에서 필요하지 않은 파일을 마음대로 삭제할 수 있습니다.

색인html 파일

너는 이 색인을 볼 수 있다.html은 우리가 사용하는 모든 모듈 귀속기와 같다.그러나 스크립트 태그에는 type="module"이라는 새 속성이 있습니다.ESM을 사용하여 파일을 구성하므로 프로젝트의 각 스크립트 태그에서 이렇게 해야 합니다.색인을 이동하지 마십시오.루트 디렉터리의 html 파일입니다.삭제<div id="app'></div>.

매인.js 파일

import './style.css' 색인에 있는 모든 css 스타일을 가져옵니다.html 파일은main을 통과합니다.js.참고: 삭제<div id="app'></div>된 경우 파일에 있는 import './style.css'를 제외한 모든 컨텐츠를 삭제해야 합니다.

.env 파일

.env 파일은 환경 변수로서 사용자의 프라이버시를 보호할 수 있습니다. 예를 들어 API 키와 같습니다.Vite는 특수import.meta.env 대상의 env 변수를 노출합니다.그럼, 이름 하나를 만들자.env는 프로젝트의 루트 디렉터리에 있습니다.Vite 공식 문서 페이지에서 Vite를 사용하여 환경 변수(예: Vite API 키)를 시작합니다.

여러 페이지

프로젝트에 HTML 파일이 여러 개 있다면vite라는 파일을 만들어야 합니다.배치하다.js, 다음 설정을 추가합니다.

const { resolve } = require('path')

module.exports = {
  build: {
    rollupOptions: {
      input: {
        main: resolve(__dirname, 'index.html'),
        *your page name*: resolve(__dirname, *your page directory*)
      }
    }
  }
}

너는 아래의 설명에 따라 너의 페이지에 들어갈 수 있다.참고: 페이지 이름은 vite.config.js 파일에 지정된 이름입니다.

JavaScript 파일에서 이미지(자산) 가져오기

자바스크립트 파일에서 자산을 가져오려면 다음과 같은 절차를 수행해야 합니다.너는 어떤 이름의 수입 명칭을 줄 수 있다.

생산성 건물

모든 파일을 구축하려면 터미널 npm run dev 에 입력해야 합니다. 루트 디렉터리에dist 폴더를 만들 것입니다. GitHub 페이지나 Netlify로 쉽게 끌어다 놓거나 옮길 수 있습니다.

결론

우리는 Vite를 사용하여 자신의 프로젝트, 폴더 구조를 설정하는 방법, 자바스크립트 파일에서 이미지를 가져오는 방법, env 파일을 가져오는 방법 등을 토론했다.자세한 내용을 보려면 Vite 문서 페이지에 액세스하여 Vite에 대해 알아봅니다.Vite에는 유튜브 영상이 없다. 왜냐하면 Vite는 매우 새롭기 때문이다.문서를 읽는 것은 어떤 블로그나 동영상보다도 당신을 진정으로 이해하게 할 수 있다.만약 당신이 Vite에 대해 어떤 문제가 있거나 내가 알아야 할 것을 더 많이 알고 있다면, Vite에 메시지를 남겨 보세요.