ميزة استبدال الوحدة النمطية الساخنة (HMR) تعمل بشكل جيد مع تطبيقات Vue.js. فيما يلي بعض النقاط الرئيسية حول HMR و Vue.js في Vite:
نقاط المفتاح:
1. تكامل الطرف الأول:- يوفر Vite عمليات تكامل HMR من الطرف الأول لمكونات ملف VUE وتفاعل React Fast. هذا يعني أن تطبيقات Vue.js يمكن أن تستفيد من إمكانات HMR الخاصة بـ Vite دون إعداد إضافي [1] [2].
2. البرنامج المساعد Vue:
- لتطبيقات Vue.js ، يوصى باستخدام المكون الإضافي الرسمي @vitejs/plugin-vue. يوفر هذا البرنامج المساعد ميزات محددة VUE 3 بما في ذلك HMR وحل المكونات العالمية والتوجيهات والفتحات [1] [2].
3. التكوين المخصص:
- إذا كان استخدام JSX بدون React أو Vue ، يمكن تكوين مخصص `jsxfactory` و `jsxfragment` باستخدام خيار `esbuild`. على سبيل المثال ، بالنسبة لـ Preact ، يمكنك تكوينها في ملف `vite.config.js` [1] [2].
4. استكشاف الأخطاء وإصلاحها:
- إذا كان HMR لا يعمل في المتصفح ، فتأكد من أن ترتيب البرنامج المساعد مناسب في ملف `vite.config.js`. يمكن أن يساعد تعطيل Vite-Plugin-Seckercer أيضًا في حل المشكلات [3].
5. التكامل مع مكتبات الطرف الثالث:
- لإضافة HMR إلى مكونات VUE التي يتم تحميلها من مكتبة طرف ثالث ، تحتاج إلى إضافة المكتبة إلى الأسماء المستعارة في ملف `vite.config.js`. هذا يضمن أن Vite يمكنه اكتشاف وتحديث المكونات بشكل صحيح خلال HMR [4].
خاتمة:
تم تصميم ميزة Vite's HMR للعمل بسلاسة مع تطبيقات Vue.js. باستخدام المكون الإضافي الرسمي VUE وتكوين خيارات `jsxfactory` و` jsxfragment `، يمكنك التأكد من أن HMR يعمل بشكل صحيح في مشروع Vue.js الخاص بك. بالإضافة إلى ذلك ، يمكن أن تساعد استكشاف الأخطاء وإصلاحها ودمج مكتبات الطرف الثالث في حل أي مشكلات قد تنشأ أثناء إعداد HMR.الاستشهادات:
[1] https://v3.vitejs.dev/guide/features
[2] https://vitejs.dev/guide/features
[3] https://stackoverflow.com/questions/74625283/vue3-vite-hot-reload-hmr-no-working-in-the-browser
[4] https://github.com/vitejs/vite/discussions/7211
[5]