vite plugin react swc

@vitejs/plugin-react-swc

Acelere o seu servidor de dev vite com o SWC

• ✅ Uma atualização rápida (~ 20x mais rápido que Babel)
• ✅ Habilitar tempo de execução automático JSX

Instalação

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

Uso

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

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

Advertências

Este plug -in possui opções limitadas para permitir boas performances e ser agnóstico do Transpiler. Aqui está a lista de opções não confundíveis que afetam o comportamento do tempo de execução:

• UsoFineForClassFields é sempre ativado, pois isso corresponde à atual especificação ECMAScript
• jsx runtime é sempre automatic
• Em desenvolvimento:
  • Esbuild está desativado, portanto a configuração do Esbuild não tem efeito
  • target é ignorado e os padrões do es2020 (consulte devTarget )
  • Os arquivos JS não são transformados
  • O tsconfig não é resolvido; portanto, as propriedades diferentes das listadas acima se comporta como os padrões de TS

Opções

JSXIMPORTSOURCE

Controle de onde a fábrica da JSX é importada.

@default "React"

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

Tsdecorators

Ativar decoradores do TypeScript. Requer experimentalDecorators no tsconfig.

@default false

 react ( { tsDecorators : true } ) ;

plugins

Use plugins SWC. Ativar SWC no momento da construção.

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

devtarget

Defina o alvo para o SWC no dev. Isso pode evitar o método de classe privada de trânsito, por exemplo.

Para o destino da produção, consulte https://vitejs.dev/config/build-options.html#build-target.

@default "ES2020"

 react ( { devTarget : "es2022" } ) ;

ParserConfig

Substitua o padrão incluir a lista (.ts, .tsx, .mts, .jsx, .mdx).

Isso requer redefinir a configuração para qualquer arquivo que você deseja incluir (TS, MDX, ...).

Se você deseja acionar a atualização rápida no JS compilado, use jsx: true . A exclusão de node_modules deve ser tratada pela função, se necessário. O uso dessa opção para usar os arquivos JSX Inside .js é altamente desencorajado e pode ser removido em qualquer versão futura.

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

Exportações de componentes consistentes

Para que o React atualize para funcionar corretamente, seu arquivo deve exportar apenas componentes do React. A melhor explicação que li é a dos documentos de Gatsby.

Se uma alteração incompatível nas exportações for encontrada, o módulo será invalidado e a HMR se propagará. Para facilitar a exportação de constantes simples ao lado do seu componente, o módulo é invalidado apenas quando o valor deles mudar.

Você pode pegar erros e obter um aviso mais detalhado com esta regra de Eslint.

Migrando de vite-plugin-swc-react-refresh

A documentação para a versão anterior do plug -in está disponível na filial V2

Para migrar, veja este Changelog