0
193
Vistas¿Cómo ver el directorio público en el proyecto Vite para recargar en caliente?
Tengo un proyecto de reacción configurado con Vite.
La recarga en caliente funciona muy bien, pero uso react-i18next para soporte de múltiples idiomas y esta es mi estructura:
public -> en -> translation.json -> ru -> translation.json Cuando cambio los archivos translation.json , Vite no los ve y tengo que actualizar la página para ver los cambios.
¿Hay alguna manera de decirle a Vite que mire todos los archivos en el directorio public ?
2 Respuestas
Responde la pregunta0
Puedes lograr eso con un plugin.
Cometí un error en mi primera respuesta, debería ser un evento full-reload y no un evento de update
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: '*' }); } }, } } luego agregue el complemento en vite.config.js :
{ plugins: [ CustomHmr() <--- custom plugin ] }💡 Te hice un repositorio en Github con un ejemplo de trabajo:
Ilustración de resultados
0
Modifiqué la respuesta de flydev para que pueda recargar en caliente los componentes dependientes de i18n sin recargar toda la página. (Actualmente usando en un proyecto mecanografiado)
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", }); } }, } }Luego agregándolo a los complementos de vite:
plugins: [ ..., i18nHotReload(), ]Y luego agregar el oyente en cualquier lugar al que pueda llegar su código (lo estoy usando en el archivo de configuración inicial i18n)
if (import.meta.hot) { import.meta.hot.on('locales-update', () => { i18n.reloadResources().then(() => { i18n.changeLanguage(i18n.language) }) }) }
i18n.reloadResources()solo no activa la recarga en caliente de las traducciones