javascript - Vite projesinde public dizinini hot-reload için nasıl izlerim?

Vite ile yapılandırılmış bir React projem var.
Hot reload mükemmel çalışıyor, ancak birden fazla dil desteği için react-i18next kullanıyorum ve yapım şöyle:

public
  -> en
    -> translation.json
  -> ru
    -> translation.json

translation.json dosyalarını değiştirdiğimde, Vite bunu izlemez ve değişiklikleri görmek için sayfayı yenilemem gerekir.

public dizinindeki tüm dosyaları izlemesi için Vite'e bir yol söylemenin bir yolu var mı?

Cevap #1

flydev'in cevabını, tüm sayfayı yeniden yüklemeden i18n'e bağımlı bileşenleri sıcak yükleyebilecek şekilde değiştirdim. (Şu anda bir typescript projesinde kullanıyorum)

import { PluginOption } from "vite";

export default function I18nHotReload(): PluginOption {
  return {
    name: 'i18n-hot-reload',
    handleHotUpdate({ file, server }) {
      if (file.includes('locales') && file.endsWith('.json')) {
        console.log('Locale file updated')
        server.ws.send({
          type: "custom",
          event: "locales-update",
        });
      }
    },
  }
}

Sonra bunu vite'in eklentilerine ekleyerek:

plugins: [
    ...,
    i18nHotReload(),
]

Ve sonra dinleyiciyi, kodunuzun ulaşabileceği herhangi bir yere eklemek (ben bunu i18n başlangıç yapılandırma dosyasında kullanıyorum)

if (import.meta.hot) {
  import.meta.hot.on('locales-update', () => {
    i18n.reloadResources().then(() => {
      i18n.changeLanguage(i18n.language)
    })
  })
}

i18n.reloadResources() tek başına çevirilerin hızlı yeniden yüklenmesini tetiklemez

Cevap #2

Güncelleme 2023: Tam yenilemeden kaçınmak için @ErickLima'nın cevabını okumalı ve kullanmalısınız.

Bunu bir eklenti ile başarabilirsiniz.

İlk cevabımda bir hata yaptım, bir update olayı değil, full-reload olayı olmalıydı

export default function CustomHmr() {
    return {
      name: 'custom-hmr',
      enforce: 'post',
      // HMR
      handleHotUpdate({ file, server }) {
        if (file.endsWith('.json')) {
          console.log('reloading json file...');
  
          server.ws.send({
            type: 'full-reload',          
            path: '*'
          });
        }
      },
    }
}

sonra vite.config.js dosyasına eklentiyi ekleyin :

{
  plugins: [
    CustomHmr()   <---  custom plugin
  ]
}

Stackblitz'te yayınlanan örneği kontrol edin:

• https://stackblitz.com/edit/vite-react-i18n

Sonuç Görselleştirmesi