تعمل ميزة استبدال الوحدة الساخنة (HMR) الخاصة بـ Vite بشكل جيد مع تطبيقات Vue.js. فيما يلي بعض النقاط الأساسية حول Vite's HMR وVue.js:
النقاط الرئيسية:
1. تكامل الطرف الأول:- يوفر Vite تكاملات HMR للطرف الأول لمكونات Vue Single File وReact Fast Refresh. وهذا يعني أن تطبيقات Vue.js يمكنها الاستفادة من إمكانات Vite's HMR دون الحاجة إلى إعداد إضافي[1][2].
2. البرنامج المساعد فيو :
- بالنسبة لتطبيقات 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-checker أيضًا في حل المشكلات[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] https://inspector.dev/how-to-make-vite-hot-module-replacement-work-on-windows/