vite plugin react swc

@vitejs/plagin-react-swc

Ускорить свой сервер Vite Dev с помощью SWC

• ✅ Быстрое быстрое обновление (~ 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 не решен, поэтому свойства, отличные от перечисленных выше

Параметры

Jsximportsource

Контроль, откуда импортируется фабрика JSX.

@default "React"

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

Цекоры

Включить декораторы TypeScript. Требуется experimentalDecorators в TSConfig.

@default false

 react ( { tsDecorators : true } ) ;

плагины

Используйте плагины SWC. Включить SWC во время сборки.

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

Devtarget

Установите цель для 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 должно обрабатывать функцию, если это необходимо. Использование этой опции для использования JSX внутри файлов .js сильно обескуражено и может быть удалено в любой будущей версии.

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

Последовательные компоненты экспортируются

Для правильной работы React ваш файл должен экспортировать только компоненты React. Лучшее объяснение, которое я прочитал, - это то, что из документов Гэтсби.

Если будет обнаружено несовместимое изменение в экспорте, модуль будет недействительным, а HMR будет распространяться. Чтобы облегчить экспорт простых константов наряду с вашим компонентом, модуль недопустимы только при изменении их значения.

Вы можете поймать ошибки и получить более подробное предупреждение с этим правилом Eslint.

Мигрирование из vite-plugin-swc-react-refresh

Документация для предыдущей версии плагина доступна в ветви V2

Чтобы мигрировать, см.