javascript - Hvordan overvåke offentlig katalog i Vite-prosjekt for hot-reload?

Jeg har et React-prosjekt konfigurert med Vite.
Hot reload fungerer flott, men jeg bruker react-i18next for støtte for flere språk, og dette er strukturen min:

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

Når jeg endrer translation.json-filene, overvåker ikke Vite dem, og jeg må oppdatere siden for å se endringene.

Finnes det en måte å få Vite til å overvåke alle filene i public-katalogen?

Svar #1

Jeg har endret flydevs svar slik at det kan hot-reloade de i18n-avhengige komponentene uten å laste hele siden på nytt. (Bruker for øyeblikket i et TypeScript-prosjekt)

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",
        });
      }
    },
  }
}

Deretter legger du det til Vites plugins:

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

Og deretter legge til lytteren hvor som helst koden din kan nå (jeg bruker den i den innledende i18n-konfigurasjonsfilen)

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

i18n.reloadResources() alene utløser ikke en varm oppdatering av oversettelsene

Svar #2

Oppdatering 2023: Du bør lese og bruke svaret fra @ErickLima for å unngå fullstendig omlasting.

Du kan oppnå det med en plugin.

Jeg gjorde en feil i mitt første svar, det burde være en full-reload hendelse og ikke en update hendelse

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: '*'
          });
        }
      },
    }
}

legg deretter til pluginen i vite.config.js :

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

Se eksemplet publisert på Stackblitz:

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

Resultatillustrasjon