vite plugin react swc

@vitejs/plugin-react-swc

เร่งความเร็วเซิร์ฟเวอร์ Vite Dev ของคุณด้วย SWC

• ✅การรีเฟรชที่รวดเร็วอย่างรวดเร็ว (~ 20x เร็วกว่าบาเบล)
• ✅เปิดใช้งานรันไทม์ JSX อัตโนมัติ

การติดตั้ง

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

การใช้งาน

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

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

คำเตือน

ปลั๊กอินนี้มีตัวเลือกที่ จำกัด เพื่อเปิดใช้งานประสิทธิภาพที่ดีและเป็นผู้ไม่เชื่อเรื่องพระเจ้า transpiler นี่คือรายการตัวเลือกที่ไม่สามารถกำหนดค่าได้ซึ่งส่งผลกระทบต่อพฤติกรรมรันไทม์:

• usefineForClassFields จะเปิดใช้งานเสมอเนื่องจากสิ่งนี้ตรงกับข้อมูลจำเพาะ ECMASCRIPT ปัจจุบัน
• jsx runtime เป็น automatic เสมอ
• ในการพัฒนา:
  • Esbuild ถูกปิดใช้งานดังนั้นการกำหนดค่า Esbuild จึงไม่มีผล
  • target จะถูกละเว้นและค่าเริ่มต้นเป็น es2020 (ดู devTarget )
  • ไฟล์ JS ไม่ได้แปลง
  • TSCONFIG ไม่ได้รับการแก้ไขดังนั้นคุณสมบัติอื่น ๆ นอกเหนือจากที่ระบุไว้ข้างต้นจะทำงานเหมือนค่าเริ่มต้น TS

ตัวเลือก

jsximportsource

การควบคุมที่นำเข้าโรงงาน JSX

@default "React"

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

Tsdecorators

เปิดใช้งานนักตกแต่ง TypeScript ต้องใช้ experimentalDecorators ใน tsconfig

@default False

 react ( { tsDecorators : true } ) ;

ปลั๊กอิน

ใช้ปลั๊กอิน SWC เปิดใช้งาน SWC ในเวลาสร้าง

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

Devtarget

ตั้งค่าเป้าหมายสำหรับ SWC ใน dev สิ่งนี้สามารถหลีกเลี่ยงวิธีการเรียนส่วนตัวของการถ่ายโอนข้อมูลส่วนตัว

สำหรับเป้าหมายการผลิตให้ดูที่ 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 Refresh เพื่อทำงานอย่างถูกต้องไฟล์ของคุณควรส่งออกส่วนประกอบปฏิกิริยาเท่านั้น คำอธิบายที่ดีที่สุดที่ฉันได้อ่านคือเอกสารจากเอกสาร Gatsby

หากพบการเปลี่ยนแปลงที่เข้ากันไม่ได้ในการส่งออกโมดูลจะไม่ถูกต้องและ HMR จะเผยแพร่ เพื่อให้ง่ายต่อการส่งออกค่าคงที่อย่างง่ายควบคู่ไปกับส่วนประกอบของคุณโมดูลจะไม่ถูกต้องเมื่อค่าของพวกเขาเปลี่ยนไป

คุณสามารถตรวจจับความผิดพลาดและรับคำเตือนโดยละเอียดมากขึ้นด้วยกฎ ESLINT นี้

การย้ายจาก vite-plugin-swc-react-refresh

เอกสารสำหรับปลั๊กอินเวอร์ชันก่อนหน้านี้มีอยู่ในสาขา V2

เพื่อโยกย้ายดูการเปลี่ยนแปลงนี้