تم إصدار Vite v4.0.4 في الثالث من يناير 2023 ويعزز وظائف بيئة تطوير Vite ويأتي بعد خمسة أشهر فقط من Vite 3. يأتي الإصدار الجديد بميزات وتحديثات جديدة ستجعل تجربة تطوير JavaScript أسرع وأقوى من ذي قبل.
هنا ، سنناقش ماهية Vite ، الميزات الهامة والتحديثات الموجودة في Vite 4.
ما أنا Vite؟
كلمة "vite" نفسها تعني "سريع". إنها أداة بناء أمامية وخادم تطوير مصمم لتوفير تجربة تطوير أسرع وخفيفة الوزن وبسيطة. إنه يخدم الكود الخاص بك أثناء التطوير ، ويجمع ملفاتك للإنتاج ، ويسمح بالتكامل السهل مع مختلف مكتبات وأطر عمل JavaScript، مثل Vue و React و Preact و Svelte.
فايت خضع للعديد من التحسينات في العامين الماضيين ، ويقدم Vite 4 العديد من الميزات الجديدة والمحسّنة.
1. تراكم 3
تراكم هي أداة تجميع وحدات JavaScript تتيح للمطورين تجميع حزم مختلفة وحدات جافا سكريبت في ملف واحد. يؤدي هذا بدوره إلى تحسين أداء التطبيق عن طريق تقليل عدد الطلبات التي يحتاجها المتصفح لتحميل الكود.
يستخدم Vite الآن Rollup 3 أثناء وقت الإنشاء. استخدم Vite الإصدار 3 Rollup 2 ولكن بعد إصدار Rollup 3 في أكتوبر 2022 ، جاء الإصدار الجديد من Vite مع ترقية رئيسية إلى Rollup 3.
يجب عليك الرجوع إلى دليل ترحيل Rollup قبل الترقية إلى Rollup 3 ، حيث قد تحدث مشكلات ، على الرغم من أن Rollup 3 متوافق في الغالب مع Rollup 2.
2. البرنامج المساعد الجديد React باستخدام Speedy Web Compiler (SWC)
SWC هو مترجم جافا سكريبت فائق السرعة مكتوب بلغة Rust. SWC و بابل كلاهما مترجم جافا سكريبت يقوم بتحويل التعليمات البرمجية الخاصة بك إلى ما تدعمه المتصفحات ولكن SWC تدعي أنها أسرع من Babel.
نظرًا لأن Vite v3 استخدم Babel ، فإن الإصدار 4 يأتي مع إدخال SWC كبديل أو بديل ، خاصة لمشاريع React.
بينما يستمر Vite في دعم Babel ، يقدم Vite 4 مكونين إضافيين (vitejs / plugin-reaction و vitejs / plugin-React-swc) مع مقايضات مختلفة لمشاريع React.
البرنامج المساعد vitejs / plugin-reaction
يوفر هذا المكون الإضافي استبدال Hot Module سريعًا أثناء استخدام الحد الأدنى من حجم الحزمة ، باستخدام esbuild و Babel. كما أنه يوفر مرونة إضافية للقدرة على استخدام خط أنابيب تحويل بابل.
يتيح استبدال الوحدة الساخنة تحديث الدهون. يسمح للمطورين بتحديث الوحدات في تطبيق قيد التشغيل دون الحاجة إلى تحديث الصفحة بأكملها. اتبع الشرح أدناه لتثبيت البرنامج المساعد في مشروعك.
npm install @ vitejs / plugin-response
اتبع الكود أدناه لاستيراد البرنامج المساعد إلى مشروعك ؛
يستورد {تعريفكونفيغ} من"vite"
يستورد تتفاعل من"@ vitejs / plugin-response"
يصدّرتقصير DefinConfig ({
الإضافات: [تتفاعل()],
})
البرنامج المساعد vitejs / plugin-React-swc
هذا مكون إضافي جديد يستخدم esbuild أثناء الإنشاء و Speed Web Compiler أثناء التطوير.
من خلال استبدال Babel بـ SWC ، يهدف البرنامج المساعد إلى تسريع عملية التطوير بشكل كبير ، خاصة بالنسبة للمشاريع التي لا تتطلب امتدادات React غير القياسية.
إليك كيفية تثبيت البرنامج المساعد ؛
npm i @ vitejs / plugin-reaction-swc
قم باستيراده إلى مشروعك على النحو التالي ؛
يستورد {تعريفكونفيغ} من"vite";
يستورد تتفاعل من"@ vitejs / plugin-React-swc";
يصدّرتقصير DefinConfig ({
الإضافات: [تتفاعل()],
});
3. استيراد CSS كسلسلة
توفر هذه الميزة حلاً لسلوك التحميل المزدوج Vite 3 CSS الذي يحدث عن طريق استيراد التصدير الافتراضي لملف CSS ، على سبيل المثال:
يستورد سلسلة css من./global.cssلمنع هذا السلوك ، يقدم Vite 4 استخدام معدل لاحقة الاستعلام المضمنة. هنا عرض توضيحي لبناء الجملة ؛
يستورد سلسلة css من./global.css؟ في النسق'لذلك تم إهمال التصدير الافتراضي v3 CSS.
4. متغيرات البيئة
قام Vite بتحديث تبعياته على dotenv و dotenv-expand. الإصدارات الجديدة المستخدمة هي dotenv 16 و dotenv-expand 9 ، على التوالي. سيطلب منك هذا التحديث التفاف القيم التي تتضمن الأحرف "#" أو "" بين علامتي اقتباس لضمان الأداء الوظيفي المناسب. هنا مثال؛
SECRET_HASH = "شيء-مع-أ-# -hash "لتسهيل عملية تحديث ملفات ENV ، أوصى Vite باستخدام واجهة سطر أوامر dotenv. هذا مكون إضافي اختياري يمكن أن يساعد في ضمان تناسق ملفات ENV عبر مختلف الأجهزة أو البيئات أو أعضاء الفريق. يمكن أن يساعد في جعل عملية تحديث ملفات ENV أقل تعقيدًا.
ترقيات وإصلاحات أخرى والترحيل إلى Vite v4.0.4
أضاف Vite المزيد من اختصارات واجهة سطر الأوامر. لمشاهدة قائمة بجميع الاختصارات ، اضغط على ح أثناء التطوير.
يستهدف إصدار المستعرض الحديث الآن أيضًا safari14 افتراضيًا لتوافق أوسع مع ES2020. هناك دعم لحزمة التصحيح عند تجميع التبعيات مسبقًا ، وهناك رسائل خطأ محسّنة أثناء SSR وأكثر من ذلك بكثير.