الصفحة الرئيسية>المتعلقة بالبرمجة>شفرة المصدر الأخرى
تنزيل

@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 ( ) ] ,
} ) ;

تحذيرات

يحتوي هذا المكون الإضافي على خيارات محدودة لتمكين العروض الجيدة وتكون غير محدودة. فيما يلي قائمة الخيارات غير القابلة للتكوين التي تؤثر على سلوك وقت التشغيل:

  • يتم تنشيط edefinefinefinforclassfields دائمًا ، حيث يتطابق هذا مع مواصفات 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 للعمل بشكل صحيح ، يجب أن يقوم ملفك بتصدير مكونات React فقط. أفضل تفسير قرأته هو واحد من مستندات Gatsby.

إذا تم العثور على تغيير غير متوافق في الصادرات ، فسيتم إبطال الوحدة النمطية وسيتم نشر HMR. لتسهيل تصدير الثوابت البسيطة إلى جانب المكون الخاص بك ، يتم إبطال الوحدة النمطية فقط عندما تتغير قيمتها.

يمكنك التقاط الأخطاء والحصول على تحذير أكثر تفصيلاً مع قاعدة ESLINT هذه.

ترحيل من vite-plugin-swc-react-refresh

تتوفر وثائق الإصدار السابق من البرنامج المساعد في فرع V2

للترحيل ، انظر هذا التغيير

يوسع
معلومات إضافية
تطبيقات ذات صلة
نوصي لك
أخبار ذات صلة الكل