Vite'ın Sıcak Modül Değiştirme (HMR) özelliği, Vue.js uygulamalarıyla iyi çalışır. Vite'ın HMR ve Vue.js'sine ilişkin bazı önemli noktalar şunlardır:
Önemli Noktalar:
1. Birinci Taraf Entegrasyonu:- Vite, Vue Tek Dosya Bileşenleri ve React Fast Refresh için birinci taraf HMR entegrasyonları sağlar. Bu, Vue.js uygulamalarının ek kurulum gerekmeden Vite'ın HMR özelliklerinden yararlanabileceği anlamına gelir[1][2].
2. Vue Eklentisi:
- Vue.js uygulamaları için resmi @vitejs/plugin-vue eklentisinin kullanılması tavsiye edilir. Bu eklenti, HMR, global bileşen çözümleme, yönergeler ve yuvalar[1] [2] dahil olmak üzere Vue 3'e özgü özellikler sağlar.
3. Özel Yapılandırma:
- React veya Vue olmadan JSX kullanılıyorsa, özel 'jsxFactory' ve 'jsxFragment', 'esbuild' seçeneği kullanılarak yapılandırılabilir. Örneğin Preact için bunları `vite.config.js` dosyasında[1][2] yapılandırabilirsiniz.
4. Sorun Giderme:
- HMR tarayıcıda çalışmıyorsa `vite.config.js` dosyasındaki eklenti sırasının doğru olduğundan emin olun. vite-plugin-checker'ı devre dışı bırakmak da sorunların çözülmesine yardımcı olabilir[3].
5. Üçüncü Taraf Kitaplıklarla Entegrasyon:
- Üçüncü taraf bir kitaplıktan yüklenen Vue bileşenlerine HMR eklemek için kitaplığı "vite.config.js" dosyasındaki takma adlara eklemeniz gerekir. Bu, Vite'ın HMR[4] sırasında bileşenleri doğru bir şekilde algılayıp güncelleyebilmesini sağlar.
Çözüm:
Vite'ın HMR özelliği Vue.js uygulamalarıyla sorunsuz çalışacak şekilde tasarlanmıştır. Resmi Vue eklentisini kullanarak ve 'jsxFactory' ve 'jsxFragment' seçeneklerini yapılandırarak, HMR'nin Vue.js projenizde doğru şekilde çalışmasını sağlayabilirsiniz. Ek olarak, üçüncü taraf kitaplıkların sorun gidermesi ve entegrasyonu, HMR kurulumu sırasında ortaya çıkabilecek sorunların çözülmesine yardımcı olabilir.Alıntılar:
[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/