Recarga en caliente en ElectronJS | Juego – 2

ElectronJS es un marco de código abierto que se utiliza para crear aplicaciones de escritorio nativas multiplataforma utilizando tecnologías web como HTML, CSS y JavaScript que pueden ejecutarse en los sistemas operativos Windows, macOS y Linux. Combina el motor Chromium y NodeJS en un solo tiempo de ejecución.

Este artículo es una continuación de Hot Reload en ElectronJS . En el artículo anterior, hemos discutido qué es Hot Reload/Live Reload y cómo lo implementamos en una aplicación Electron usando los paquetes electron-reload y electron-reloader npm respectivamente. En este artículo, implementaremos Hot Reload dentro de la aplicación Electron usando los paquetes npm elemon y electron-hot-reload respectivamente. Además, como se mencionó en el artículo anterior, la funcionalidad Hot Reload solo debe implementarse en el entorno de desarrollo . Por lo tanto, hemos utilizado el NODE_ENVVariable de entorno para definir la misma que la utilizada en el artículo anterior. Podemos acceder a esta variable usando el objeto de proceso global en Electron. 

• Consulte el artículo: Procesar objeto en ElectronJS .

También podemos establecer esta variable de entorno desde la consola de Windows. Para obtener información más detallada sobre las variables de entorno admitidas y utilizadas en Electron.

• Consulte el artículo: Variables de entorno en ElectronJS . 

En caso de que queramos una solución para el entorno de ensayo de desarrollo que sea compatible con todas las plataformas de SO y no requiera ningún cambio de configuración, también podemos consultar el artículo: Administrar entornos de ensayo en ElectronJS . Continuaremos usando la misma base de código desde donde lo dejamos en el artículo anterior. La estructura del proyecto y el archivo package.json también siguen siendo los mismos. Ahora implementaremos la funcionalidad Hot Reload utilizando los paquetes npm elemon y electron-hot-reload respectivamente. 

• Primero, instalaremos elemon usando npm . 

npm install elemon --save

• Instale electron-hot-reload usando npm . 

npm install electron-hot-reload --save

Ambos paquetes no tienen ninguna relación y tienen una sintaxis diferente y usan métodos diferentes. Podemos implementar la funcionalidad Hot Reload usando ambos paquetes por separado en Electron. Los pasos básicos necesarios para configurar la aplicación Electron siguen siendo los mismos. 

paquete.json: 

{
  "name": "electron-hot",
  "version": "1.0.0",
  "description": "Hot Reload for Electron",
  "main": "main.js",
  "scripts": {
    "start": "electron ."
  },
  "keywords": [
    "electron"
  ],
  "author": "Radhesh Khanna",
  "license": "ISC",
  "dependencies": {
    "electron": "^8.2.5",
    "electron-hot-reload": "^0.1.4",
    "elemon": "^5.0.3"
  },
  "devDependencies": {
    "electron-reload": "^1.5.0",
    "electron-reloader": "^1.0.1"
  }
}

Producción: 

Nota: Consulte el artículo anterior para obtener una comprensión completa de la variable de entorno  NODE_ENV .

• Enfoque 1: uso del paquete elemon npm. Elemon es un módulo liviano que proporciona una manera simple y eficiente de agregar la funcionalidad Hot Reload al desarrollar aplicaciones Electron. Además, este paquete solo se puede usar después de que se emita el evento listo del módulo de la aplicación en el Proceso principal de la aplicación. Según los autores y colaboradores de este paquete, el código cumple con el estándar JS, que define un determinado conjunto de reglas que deben seguirse al codificar en JavaScript . Al implementar Hot Reload en Electron usando este paquete, si hay algún cambio en alguno de los Procesos del Rendererla instancia respectiva de BrowserWindow se vuelve a cargar, pero cuando hay un cambio en el proceso principal de la aplicación, es decir, el archivo main.js , la aplicación sale de la instancia actual y se reinicia con una nueva instancia para reflejar los cambios. 
• Para obtener información más detallada, consulte el enlace: Este paquete es compatible y funciona sin errores a partir de Electron v8.3.0 y se actualiza periódicamente. 

https://www.npmjs.com/package/elemon. 

• main.js : agregue el siguiente fragmento en ese archivo. Agregaremos este fragmento de código a la función createWindow() . 

const env = process.env.NODE_ENV || 'development';
// ..
    // Open the DevTools.
    win.webContents.openDevTools()
  
    if (env === 'development') {
        const elemon = require('elemon')
        elemon({
            app: app,
            mainFile: 'main.js',
            bws: [
                // The BrowserWindow Instance used 
                // in the createWindow() function is win. 
                { bw: win, res: ['index.html'] },
            ]
        });
    }

• Explicación: El método de instancia elemon(refs) acepta los siguientes parámetros. Este método no tiene ningún tipo de retorno. Todos los parámetros pasados ​​en este método Instancia son obligatorios .
  • refs: Objeto Este objeto toma referencias a la instancia de la aplicación, las instancias de la ventana del navegador , el archivo del proceso principal y los respectivos archivos e instancias del proceso del renderizador. Toma los siguientes parámetros.
    • app: Object Este parámetro toma un objeto que representa la Instancia del módulo principal de la aplicación que se importa al inicio del archivo main.js.
    • mainFile: String Este parámetro toma una string que representa el nombre del archivo del proceso principal . En este caso, es el archivo main.js.
    • bws: Object[] Este parámetro incluye una array de objetos , cada uno de los cuales representa la instancia respectiva de BrowserWindow y sus archivos y recursos asociados. Si hay varias instancias de BrowserWindow definidas dentro del proceso principal de la aplicación, cada instancia de BrowserWindow se representará como un objeto separado dentro de la array. Cada objeto bws toma los siguientes parámetros.
      • bw: Objeto Este parámetro representa la instancia global de BrowserWindow .
      • res: String[] Este parámetro representa una array de strings donde cada string representa un recurso o el nombre del archivo que de alguna manera está conectado a esa instancia de BrowserWindow . En nuestro caso, este parámetro consistirá en index.html como el único elemento String dentro de la array res . Consulte el código para una mejor comprensión.

• Enfoque 2: uso del paquete npm electron-hot-reload . La recarga en caliente de electrones también es un módulo liviano que proporciona una manera simple de agregar la funcionalidad de recarga en caliente al desarrollar aplicaciones de Electron. Además, este paquete solo se puede usar después de que se emita el evento listo del módulo de la aplicación en el Proceso principal de la aplicación. Este paquete no es tan popular como elemon pero proporciona un conjunto diferente de funciones que los otros paquetes. La característica más importante de este paquete es que proporciona observadores separados para el proceso principal y los diferentes procesos de representación.de la aplicación, por tanto, haciéndola más personalizable para cada uno de los Procesos. También podemos especificar ganchos antes de que tenga lugar la recarga en caliente para los archivos, y podemos especificar directamente el nombre de los archivos para los que queremos la recarga en caliente. Este paquete también brinda la ventaja adicional de detectar errores no controlados en la aplicación, si así lo especificamos. 
• Para obtener información más detallada, consulte el enlace: El comportamiento de este paquete es el mismo que el de elemon . En los cambios en el Proceso Principal , la aplicación se reinicia y en los cambios en el Proceso Renderer , se vuelve a cargar la Instancia respectiva de BrowserWindow . Este paquete es compatible y funciona sin errores a partir de Electron v8.3.0, pero no se actualiza regularmente. 

https://www.npmjs.com/package/electron-hot-reload. 

• main.js : agregue el siguiente fragmento en ese archivo. Agregaremos este fragmento de código al final del archivo sin tocar ningún código existente. 

// Importing the watchers from electron-hot-reload
const { mainReloader, rendererReloader } = require('electron-hot-reload')
const env = process.env.NODE_ENV || 'development';
// ..
if (env === 'development') {
    const mainFile = path.join(__dirname, 'main.js');
    const rendererFile = path.join(__dirname, 'index.html');
      
    mainReloader(mainFile, (error, path) => {
        console.log(path);
        console.log("It is a main's process hook!");
    });
      
    rendererReloader(rendererFile, (error, path) => {
        console.log(path);
        console.log("It is a renderer's process hook!");
    });
}

• Explicación: tanto el método de instancia mainReloader( rutas, ignorado, controlador, opciones ) como el método de instancia rendererReloader( rutas, ignorado, controlador, opciones ) tienen la misma firma de método. Ambos métodos de Instancia toman los siguientes parámetros. Ambos métodos no tienen ningún tipo de devolución.
  • rutas: String/String[] Este parámetro toma un parámetro de String o una Array de Strings que representan la ruta de los archivos a ser observados para la Recarga en Caliente. Necesitamos especificar la ruta completa del archivo y, por lo tanto, hemos utilizado el método path.join() del módulo de ruta de NodeJS . En este tutorial, hemos especificado la ruta al archivo main.js y al index.html respectivamente para los observadores del proceso principal y del proceso de representación.
  • ignorado: RegExp/RegExp[] (opcional) Este parámetro es un parámetro opcional . Este parámetro toma un parámetro RegExp o una array de RegExp que representa las expresiones Regex de los archivos y directorios que se ignorarán para la recarga activa. Para obtener información más detallada sobre RegExp , consulte el artículo: JavaScript RegExp [abc] Expression . Para comprender cómo funcionan las expresiones regulares en JavaScript, consulte el artículo: Expresiones regulares de JavaScript .
  • handler: Función (Opcional) Esta función es Opcional. Esta función es una función de devolución de llamada para crear ganchos y detectar errores no controlados dentro de la aplicación, como se menciona en la descripción. Esta función recibe dos parámetros:
    • error El error no controlado.
    • ruta La ruta del archivo cambió.