vite plugin react swc

@ vitejs / plugin-react-swc

Accélérez votre serveur de développement Vite avec SWC

• ✅ Un rafraîchissement rapide rapide (~ 20 fois plus rapide que Babel)
• ✅ Activer l'exécution automatique de JSX

Installation

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

Usage

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

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

Mises en garde

Ce plugin a des options limitées pour permettre de bonnes performances et être un transpilateur agnostique. Voici la liste des options non configurables qui ont un impact sur le comportement d'exécution:

• usefineforClassfields est toujours activé, car cela correspond à la spécification ECMAScript actuelle
• jsx runtime est toujours automatic
• En développement:
  • Esbuild est désactivé, donc la configuration d'Esbuild n'a aucun effet
  • target est ignorée et par défaut es2020 (voir devTarget )
  • Les fichiers JS ne sont pas transformés
  • tsconfig n'est pas résolu, donc des propriétés autres que celles énumérées ci-dessus se comportent comme des valeurs par défaut

Options

JSIxPortSource

Contrôlez d'où l'usine JSX est importée.

@default "réagir"

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

tsdecorators

Activer les décorateurs dactylographiés. Nécessite experimentalDecorators dans TSConfig.

@default false

 react ( { tsDecorators : true } ) ;

plugins

Utilisez des plugins SWC. Activez SWC au moment de la construction.

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

devtarget

Définissez la cible pour SWC dans Dev. Cela peut éviter par exemple la méthode de classe privée de transpile à la baisse.

Pour l'objectif de production, voir https://vitejs.dev/config/build-options.html#build-target.

@default "ES2020"

 react ( { devTarget : "es2022" } ) ;

parserconfig

Remplacez la liste par défaut Inclure la liste (.ts, .tsx, .mts, .jsx, .mdx).

Cela nécessite de redéfinir la configuration pour tout fichier que vous souhaitez être inclus (TS, MDX, ...).

Si vous souhaitez déclencher un actualisation rapide sur JS compilé, utilisez jsx: true . L'exclusion de Node_Modules doit être gérée par la fonction si nécessaire. L'utilisation de cette option pour utiliser JSX à l'intérieur des fichiers .js est très découragée et peut être supprimée dans n'importe quelle version future.

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

Exportations de composants cohérents

Pour que REACT se rafraîchisse correctement, votre fichier ne doit exporter que les composants React. La meilleure explication que j'ai lue est celle des documents Gatsby.

Si un changement incompatible dans les exportations est trouvé, le module sera invalidé et le HMR se propagera. Pour faciliter l'exportation de constantes simples à côté de votre composant, le module n'est invalidé que lorsque leur valeur change.

Vous pouvez prendre des erreurs et obtenir un avertissement plus détaillé avec cette règle d'Eslint.

Migration de vite-plugin-swc-react-refresh

La documentation de la version précédente du plugin est disponible dans la branche V2

Pour migrer, voir ce changelog