vite plugin react swc

@vitejs/Plugin-react-swc

Beschleunigen Sie Ihren Vite Dev Server mit SWC

• ✅ Eine schnelle schnelle Aktualisierung (~ 20x schneller als Babel)
• ✅ Aktivieren Sie die automatische JSX -Laufzeit

Installation

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

Verwendung

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

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

Einschränkungen

Dieses Plugin verfügt über begrenzte Optionen, um gute Leistungen zu ermöglichen und die Transpiler -Agnostik zu ermöglichen. Hier finden Sie die Liste der nicht konfigurierbaren Optionen, die sich auf das Laufzeitverhalten auswirken:

• UsefineforClassFields wird immer aktiviert, da dies mit der aktuellen ECMAScript -Spezifikation übereinstimmt
• jsx runtime ist immer automatic
• In der Entwicklung:
  • Esbuild ist deaktiviert, sodass die ESBuild -Konfiguration keinen Einfluss hat
  • target wird ignoriert und standardmäßig es2020 (siehe devTarget )
  • JS -Dateien werden nicht transformiert
  • Tsconfig ist nicht behoben, daher verhält sich die oben aufgeführten Eigenschaften als die oben genannten Ts -Standards

Optionen

jsximportsource

Kontrolle, woher die JSX -Fabrik importiert wird.

@default "reagieren"

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

TsDecorators

Aktivieren Sie Typenkriptdekorateure. Erfordert experimentalDecorators in Tsconfig.

@default false

 react ( { tsDecorators : true } ) ;

Plugins

Verwenden Sie SWC -Plugins. Aktivieren Sie SWC zur Bauzeit.

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

devtarget

Stellen Sie das Ziel für SWC in Dev. Dies kann beispielsweise vermeiden, die Methode zur privaten Klassen nach unten zu übertragen.

Für Produktionsziel finden Sie https://vitejs.dev/config/build-options.html#build-target.

@default "ES2020"

 react ( { devTarget : "es2022" } ) ;

Parserconfig

Überschreiben Sie die Standardeinschlussliste (.ts, .tsx, .mts, .jsx, .mdx).

Dies erfordert, um die Konfiguration für jede Datei neu zu definieren, die Sie enthalten möchten (TS, MDX, ...).

Wenn Sie eine schnelle Aktualisierung von kompilierten JS auslösen möchten, verwenden Sie jsx: true . Der Ausschluss von NODE_MODULES sollte bei Bedarf von der Funktion behandelt werden. Die Verwendung dieser Option zur Verwendung von JSX in .js -Dateien ist stark entmutigt und kann in jeder zukünftigen Version entfernt werden.

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

Konsistente Komponenten Exporte

Damit React aktualisiert werden, um korrekt zu funktionieren, sollte Ihre Datei nur die Reaktionskomponenten exportieren. Die beste Erklärung, die ich gelesen habe, ist die von den Gatsby -Dokumenten.

Wenn eine inkompatible Änderung der Exporte gefunden wird, wird das Modul ungültig und HMR wird sich ausbreiten. Um es einfacher zu machen, einfache Konstanten zusammen mit Ihrer Komponente zu exportieren, wird das Modul nur ungültig, wenn sich der Wert ändert.

Mit dieser Eslint -Regel können Sie Fehler aufnehmen und eine detailliertere Warnung erhalten.

Migration von vite-plugin-swc-react-refresh

Die Dokumentation für die vorherige Version des Plugins ist in der V2 -Filiale erhältlich

Um zu migrieren, siehe diesen Changelog