Tengo un Parcel.js 2.0 simple configurado con un archivo main.js como punto de partida:
import('./components/faqs/faqs.js').then(function(Faqs){ Faqs.init() })Al ejecutar la vigilancia de paquetes, descubrí que los cambios en el archivo main.js HMR son los esperados, pero los cambios en el enlace faqs.js dentro de la función de inicio no lo hacen y requieren una actualización de la página.
Si tomo un enfoque síncrono como:
import init from'./components/faqs/faqs.js' init()Luego, HMR funciona según lo previsto, actualizándose con cualquier cambio en faqs.js. ¿Es este un comportamiento esperado del HMR de Parcel?
Depuré esto y aquí hay una descripción rápida de lo que sucede actualmente en Parcel HMR con este ejemplo:
main.js la primera vez, y dinámicamente importa y carga faqs.jsfaqs.js , el paquete envía un mensaje websocket al navegador, informándole que el paquete que comienza con faqs.js debe volver a cargarse. El código del paquete actualizado se descarga y ejecuta, incluida una nueva definición para la función init() . Cualquier efecto secundario global en faqs.js también se volverá a ejecutar. Hasta aquí todo bien.main.js .then realmente ejecuta la función init también se vuelva a ejecutar. Esto no sucede porque la parcela trata los diferentes paquetes dinámicos de forma independiente.En mi opinión, esto parece un poco tosco de la implementación actual de HMR en Parcel2. Presentaré un error con lo que encontré para que podamos pensar en mejorar esto.
Mientras tanto, sin embargo, puede solucionar el problema usted mismo proporcionando una devolución de llamada a module.hot.accept , que se inyectará por paquete en el modo de desarrollo (consulte la documentación ). Por ejemplo, podría agregar esto a faqs.js :
// "module.hot" is injected by parcel in development mode. // This check will ensure that this code _only_ runs in this context // (eg it won't affect production) if (module.hot) { // The callback provided to "module.hot.accept" will be run whenever // parcel sends a new version of `faqs.js` to the browser in development. module.hot.accept(() => { // Actually run the new version of your init function. init() }) }