Aprende a recargar tu proyecto Electron automáticamente cuando se realiza un cambio sin reconstruir electron.

Cómo utilizar la recarga en vivo en tu proyecto de Electron Framework

Muchos desarrolladores web que trabajan con frameworks como ReactJS o Angular tienden a implementar un paquete como Webpack que incluye muchas utilidades para hacer que el proceso de desarrollo sea más fluido y rápido. Una de las características más útiles de Webpack es la capacidad de recarga en caliente que actualiza el archivo que se modificó en su proyecto sin actualizar todo el estado de su aplicación, pero el que cambió.

Aunque la recarga en caliente aún no está disponible para Electron, puede implementar una función de recarga en vivo utilizando un módulo de código abierto. La recarga en vivo recarga o actualiza toda la aplicación cuando cambia un archivo. Entonces, por ejemplo, si estuviera usando algún elemento de navegación dinámica (como una lista con JavaScript) y se encuentra en alguna pestaña y decide hacer un cambio en su código JS, la recarga en vivo reiniciaría la aplicación y cargaría la aplicación de nuevo en el elemento inicial en su elemento de navegación.

1. Instala Electron Reload

Electron Reload es la forma más sencilla de cargar contenido de todas las ventanas del navegador activas dentro de electron cuando cambian los archivos de origen. Por lo tanto, implementa una función de recarga en vivo en su proyecto. Para instalar este módulo en su proyecto electron, cambie con su terminal al directorio de su proyecto electron y ejecute el siguiente comando:

npm install electron-reload

La mayoría de las otras soluciones para lograr una recarga en vivo son demasiado complicadas y requieren tiempo para implementarlas, por ejemplo, implementar un servidor HTTP, luego configurar sockets, etc. Demasiadas cosas para una "tarea simple". Para obtener más información sobre esta biblioteca, visite el repositorio oficial en Github aquí.

A. Implementar recarga en vivo para su contenido

Si no estás modificando JavaScript que maneja Electron sino solo tu propio código (frontend), entonces la recarga en vivo de tu contenido será suficiente. Todo lo que necesitas es solicitar el módulo electron-reload con la ruta de la carpeta de tu proyecto donde una vez que un archivo cambia, se activará la recarga en vivo. Con un proyecto predeterminado, puedes hacer esto en tu archivo main.js después de que se requiera el módulo de electrones:

const electron = require('electron')

// Habilita la recarga en vivo para todos los archivos dentro del directorio de tu proyecto
require('electron-reload')(__dirname);

Eso debería ser suficiente para la mayoría de los casos. Sin embargo, el código anterior actualiza solo el contenido web de todas las ventanas del navegador. Entonces, si desea tener un restablecimiento completo (lo que significa comenzar un nuevo proceso de electrones), verifique el siguiente paso.

B. Implementar recarga en vivo para electrones y contenido

Si deseas un reestablecimiento completo (iniciando un nuevo proceso de electron), simplemente puedes pasar la ruta al ejecutable del electrón en el objeto de opciones. Por ejemplo, si ya tienes electron instalado, puedes hacerlo en tu archivo main.js:

const electron = require('electron')

// Habilite la recarga en vivo para Electron también
require('electron-reload')(__dirname, {
    // Ten en cuenta que la ruta al electrón puede variar según el archivo principal
    electron: require(`${__dirname}/node_modules/electron`)
});

Y cuando realices cambios en los archivos JS que manejan el código de Electron o tu código de interfaz, la aplicación se volverá a cargar (recarga dura solo cuando sea código de Electron).

Que te diviertas ❤️!


Interesado en la programación desde los 14 años, Carlos es un programador autodidacta, fundador y autor de la mayoría de los artículos de Our Code World.

Conviertete en un programador más sociable

Patrocinadores