기존 웹 앱에 Vite 추가

"Veet"으로 발음 된 Vite는 속도와 사용 편의성으로 유명한 현대적인 JavaScript Bundler입니다. 최소한의 구성이 필요한 강력한 도구이지만 광범위한 사용자 정의 옵션을 제공합니다. 이 기사에서는 다른 번들러 (예 : Webpack)에서 Vite로 기존 프로젝트를 마이그레이션하는 것이 자세히 설명되어 있습니다. 새로운 프로젝트의 경우 공식 VITE 문서를 참조하십시오. 레거시 마이그레이션의 경우에도 간단한 vite 프로젝트를 스캐 폴딩하는 것이 먼저 그 구조를 더 잘 이해하기 위해 권장됩니다.

웹 팩에서 vite로 마이그레이션

이 안내서는 실질적인 오랜 웹 팩 프로젝트를 마이그레이션 한 경험을 반영합니다. 이 프로세스는 전환 중에 Vite의 구성 기능을 강조합니다.

Vite의 불필요한 웹 팩 구성

Vite는 본질적으로 광범위한 웹 팩 구성이 필요한 많은 작업을 처리합니다. 이를 통해 많은 일반적인 웹 팩 플러그인 및 설정이 필요하지 않습니다.

정적 자산 처리

WebPack은 종종 정적 자산 (이미지, 글꼴 등)을로드하기위한 명시적인 구성이 필요합니다.

 {
  테스트 : /\. (png| jpg|gif|svg|eot| woff|woff2|ttf)$/,
  사용: [
    {
      로더 : "파일 로더"
    }
  ]]
}

Vite는 이것을 자동으로 관리합니다.

스타일링 (CSS/SCSS)

Webpack의 스타일링 구성은 복잡 할 수 있습니다.

 {
  테스트 : /\ .scss$/,
  사용 : [Minicssextractplugin.loader, "CSS-Loader", "Sass-Loader"]
},

// 나중에

새로운 Minicssextractplugin ({filename : "[name]-[contenthash] .css"}),

Vite는 CSS 및 SCS를 기본적으로 지원합니다. Sass를 설치하면 나머지를 처리합니다.

변환 (TypeScript/JSX)

WebPack은 TypeScript 및 JSX를위한 변환이 필요합니다.

 {
  테스트 : /\. (to) )sx ?$/,
  제외 : /node_modules /,
  로더 : "Babel-Loader"
},

... 해당 바벨 구성으로. Vite는 최신 JavaScript 기능 및 TypeScript를 지원하는이 상자를 처리합니다. 이전 브라우저 지원을 위해 플러그인을 사용할 수 있습니다.

노드 모듈 해상도

Webpack은 node_modules 해결하기위한 명시적인 구성이 필요합니다.

 해결하다: {
  모듈 : [path.resolve ( "./ node_modules")]]]
}

Vite는 이것을 자동으로 처리합니다.

생산/개발 모드

웹 팩은 종종 mode 사용하여 환경을 구별합니다.

 모드 : isprod? "생산": "개발",

Vite는 별도의 명령 (개발을위한 vite , 생산을위한 vite build )을 사용합니다.

파일 확장

WebPack은 종종 파일 확장을 지정해야합니다.

 해결하다: {
  확장 : [ ".ts", ".tsx", ".js"],
}

Vite는 자동으로 공통 확장을 처리합니다.

롤업 플러그인 호환성

많은 롤업 플러그인은 Vite와 호환되므로 기존 플러그인의 원활한 전환을 제공합니다. 호환성 정보는 VITE 문서를 참조하십시오.

첫 번째 Vite 프로젝트를 설정합니다

기존 프로젝트를 마이그레이션하려면 JavaScript Entry 파일을 참조하는 HTML Entry Point (예 : index.html )로 시작하십시오. 필요한 플러그인을 설치하십시오 (예 : React 프로젝트를위한 @vitejs/plugin-react ). vite.config.ts 파일 생성 :

 "vite"에서 {defuleconfig} 가져 오기;
"@vitejs/plugin-react"에서 가져 오는 반응;

내보내기 DefuleConfig ({
  플러그인 : [React ()]
});

NPM 스크립트 추가 :

 "dev": "vite",
"빌드": "Vite Build",
"미리보기 :"Vite Preview ",

npm run dev 로 개발 서버를 시작하십시오.

고급 구성 : 별명, 환경 변수 및 프록시

별칭

Webpack 별칭은 resolve.alias 사용하여 Vite에서 복제 할 수 있습니다.

 해결하다: {
  별칭 : {
    jscolor : path.resolve ( "./ util/jscolor.js"),
    앱 : path.resolve ( "./ app"),
    // ... 더 많은 별칭
  }
},

환경 변수

Vite는 일반적으로 VITE_ 로 접두사를 가진 환경 변수에 import.meta.env 사용합니다. 레거시 프로젝트의 경우 기존 process.env 처리하기 위해 사용자 정의 플러그인이 필요할 수 있습니다. ENV 변수 : (예제는 간단하지만 원래 예와 유사)

서버 프록시

개발 중에 서비스 백엔드 요청을 프록시하려면 :

 서버 : {
  프록시 : {
    "/GraphQL": "http : // localhost : 3001"
  }
}

건축 도서관

라이브러리 구축의 경우 vite.config.ts 의 build 옵션을 구성합니다.

결론

Vite는 웹 애플리케이션 개발을 크게 개선하여 속도와 사용 편의성을 제공합니다. 롤업 플러그인과의 기능과 호환성은 기존 프로젝트를 비교적 간단하게 마이그레이션합니다.

위 내용은 기존 웹 앱에 Vite 추가의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!