vite plugin react swc

@vitejs/plugin-react-swc

Speed up your Vite dev server with SWC

• ✅ Una actualización rápida rápida (~ 20x más rápido que Babel)
• ✅ Habilitar tiempo de ejecución JSX automático

Instalación

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

Uso

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

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

Advertencias

Este complemento tiene opciones limitadas para habilitar buenas actuaciones y ser transpilador de agnóstico. Aquí está la lista de opciones no configurables que afectan el comportamiento de tiempo de ejecución:

• UsedefineforClassfields siempre se activa, ya que esto coincide con la especificación de ECMAScript actual
• jsx runtime es siempre automatic
• En desarrollo:
  • ESBuild está deshabilitado, por lo que la configuración de ESBuild no tiene ningún efecto
  • target se ignora y el valor predeterminado es es2020 (ver devTarget )
  • Los archivos JS no se transforman
  • TSCONFIG no se resuelve, por lo que las propiedades distintas de las que se enumeran anteriormente se comportan como TS predeterminados

Opción

jsximportSource

Control de donde se importa la fábrica JSX.

@default "reaccionar"

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

tsdecorators

Habilitar decoradores mecanografiados. Requiere experimentalDecorators en TSCONFIG.

@default falso

 react ( { tsDecorators : true } ) ;

complementos

Use complementos SWC. Habilite SWC en la hora de construcción.

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

devinarget

Establezca el objetivo para SWC en Dev. Esto puede evitar el método de clase privada de caída baja, por ejemplo.

Para el objetivo de producción, consulte https://vitejs.dev/config/build-options.html#build-target.

@default "ES2020"

 react ( { devTarget : "es2022" } ) ;

parserconfig

Anular la lista de inclusión predeterminada (.ts, .tsx, .mts, .jsx, .mdx).

Esto requiere redefinir la configuración para cualquier archivo que desee incluir (TS, MDX, ...).

If you want to trigger fast refresh on compiled JS, use jsx: true . La exclusión de Node_Modules debe ser manejada por la función si es necesario. Usar esta opción para usar JSX Inside .js archivos está muy desanimado y se puede eliminar en cualquier versión futura.

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

Exportaciones de componentes consistentes

Para reaccionar la actualización para funcionar correctamente, su archivo solo debe exportar los componentes React. La mejor explicación que he leído es la de Gatsby Docs.

Si se encuentra un cambio incompatible en las exportaciones, el módulo se invalidará y HMR se propagará. Para facilitar la exportación de constantes simples junto con su componente, el módulo solo se invalida cuando cambia su valor.

Puede captar errores y obtener una advertencia más detallada con esta regla de eslint.

Migrar de vite-plugin-swc-react-refresh

La documentación para la versión anterior del complemento está disponible en la rama V2

Para migrar, vea este CangeLog