vite plugin react swc

@vitejs/plugin-react-swc

SWC로 Vite Dev 서버 속도를 높이십시오

• ✅ 빠른 빠른 새로 고침 (바벨보다 ~ 20 배 빠릅니다)
• ✅ 자동 JSX 런타임을 활성화합니다

설치

npm i -D @vitejs/plugin-react-swc

용법

 import { defineConfig } from "vite" ;
import react from "@vitejs/plugin-react-swc" ;

export default defineConfig ( {
  plugins : [ react ( ) ] ,
} ) ; 

경고

이 플러그인에는 우수한 성능을 발휘할 수있는 옵션이 제한되어 있으며 비공식적이지 않습니다. 다음은 런타임 동작에 영향을 미치는 구성 불가능한 옵션 목록입니다.

• usedefineforclassfields는 항상 ECMAScript 사양과 일치하므로 항상 활성화됩니다.
• jsx runtime 항상 automatic 입니다
• 개발 중 :
  • esbuild가 비활성화되어 있으므로 Esbuild 구성에는 영향을 미치지 않습니다.
  • target 무시되고 기본값이 es2020 으로 나타납니다 ( devTarget 참조)
  • JS 파일은 변환되지 않았습니다
  • tsconfig는 해결되지 않으므로 위에 나열된 것 이외의 속성은 ts 기본값처럼 동작합니다.

옵션

JSXimportSource

JSX 공장에서 수입되는 위치를 제어하십시오.

@default "React"

 react ( { jsxImportSource : "@emotion/react" } ) ;

tsdecorators

타입 스크립트 데코레이터를 활성화합니다. TSConfig에서 experimentalDecorators 필요합니다.

@default false

 react ( { tsDecorators : true } ) ;

플러그인

SWC 플러그인을 사용하십시오. 빌드 시간에 SWC를 활성화하십시오.

 react ( { plugins : [ [ "@swc/plugin-styled-components" , { } ] ] } ) ;

DevTarget

Dev에서 SWC의 대상을 설정하십시오. 예를 들어 개인 클래스 방법을 다운 트랜스 파일을 방지하는 것을 피할 수 있습니다.

생산 목표는 https://vitejs.dev/config/build-options.html#build-target을 참조하십시오.

@default "es2020"

 react ( { devTarget : "es2022" } ) ;

parserconfig

기본값은 포함 된 목록 (.ts, .tsx, .mts, .jsx, .mdx)을 무시합니다.

포함하려는 모든 파일에 대한 구성을 재정의해야합니다 (TS, MDX, ...).

컴파일 된 JS에서 빠른 새로 고침을 트리거하려면 jsx: true 사용하십시오. Node_Modules의 제외는 필요한 경우 기능별로 처리해야합니다. 이 옵션을 사용하여 .js 파일 내부에서 JSX를 사용하는 것은 낙담하며 향후 버전에서 제거 할 수 있습니다.

 react ( {
  parserConfig ( id ) {
    if ( id . endsWith ( ".res" ) ) return { syntax : "ecmascript" , jsx : true } ;
    if ( id . endsWith ( ".ts" ) ) return { syntax : "typescript" , tsx : false } ;
  } ,
} ) ; 

일관된 구성 요소 수출

React Refresh가 올바르게 작동하려면 파일이 반응 구성 요소 만 내보내야합니다. 내가 읽은 가장 좋은 설명은 Gatsby Docs의 것입니다.

수출의 양립 할 수없는 변화가 발견되면 모듈이 무효화되고 HMR이 전파됩니다. 구성 요소와 함께 간단한 상수를보다 쉽게 ​​내보낼 수 있도록 모듈은 값이 변경 될 때만 무효화됩니다.

이 eslint 규칙으로 실수를 잡고 더 자세한 경고를 얻을 수 있습니다.

vite-plugin-swc-react-refresh 에서 마이그레이션

플러그인의 이전 버전에 대한 문서는 v2 지점에서 사용할 수 있습니다.

마이그레이션하려면이 변경 사항을 참조하십시오