vite plugin react swc

@vitejs/plugin-react-swc

Mempercepat server vite dev Anda dengan swc

• ✅ Refresh cepat cepat (~ 20x lebih cepat dari Babel)
• ✅ Aktifkan Runtime JSX Otomatis

Instalasi

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

Penggunaan

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

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

Peringatan

Plugin ini memiliki opsi terbatas untuk memungkinkan kinerja yang baik dan menjadi agnostik transpiler. Berikut adalah daftar opsi yang tidak dapat dikonfigurasi yang memengaruhi perilaku runtime:

• UsedEfIneforClassFields selalu diaktifkan, karena ini cocok dengan spesifikasi ecmascript saat ini
• jsx runtime selalu automatic
• Dalam pengembangan:
  • Esbuild dinonaktifkan, jadi konfigurasi esbuild tidak berpengaruh
  • target diabaikan dan default ke es2020 (lihat devTarget )
  • File JS tidak diubah
  • Tsconfig tidak terselesaikan, jadi properti selain yang tercantum di atas berperilaku seperti default TS

Opsi

JSXIMPORTSOUR

Kontrol dari mana pabrik JSX diimpor dari.

@default "bereaksi"

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

tsdecorators

Aktifkan dekorator TypeScript. Membutuhkan experimentalDecorators di Tsconfig.

@default false

 react ( { tsDecorators : true } ) ;

plugin

Gunakan plugin SWC. Aktifkan SWC pada waktu pembangunan.

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

DevTarget

Atur target untuk SWC di Dev. Ini dapat menghindari metode kelas pribadi yang diturunkan transpile misalnya.

Untuk target produksi, lihat https://vitejs.dev/config/build-options.html#build-target.

@default "ES2020"

 react ( { devTarget : "es2022" } ) ;

Parserconfig

Mengganti default termasuk daftar (.ts, .tsx, .mts, .jsx, .mdx).

Ini perlu mendefinisikan kembali konfigurasi untuk file apa pun yang ingin Anda sertakan (TS, MDX, ...).

Jika Anda ingin memicu refresh cepat pada JS yang dikompilasi, gunakan jsx: true . Pengecualian node_modules harus ditangani oleh fungsi jika diperlukan. Menggunakan opsi ini untuk menggunakan JSX di dalam file .js sangat tidak dianjurkan dan dapat dihapus dalam versi apa pun di masa mendatang.

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

Ekspor Komponen yang Konsisten

Agar React Refresh berfungsi dengan benar, file Anda hanya boleh mengekspor komponen bereaksi. Penjelasan terbaik yang saya baca adalah yang dari dokumen Gatsby.

Jika perubahan yang tidak kompatibel dalam ekspor ditemukan, modul akan dibatalkan dan HMR akan merambat. Untuk membuatnya lebih mudah untuk mengekspor konstanta sederhana di samping komponen Anda, modul ini hanya dibatalkan ketika nilainya berubah.

Anda dapat menangkap kesalahan dan mendapatkan peringatan yang lebih rinci dengan aturan Eslint ini.

Migrasi dari vite-plugin-swc-react-refresh

Dokumentasi untuk versi plugin sebelumnya tersedia di cabang V2

Untuk bermigrasi, lihat changelog ini