Recarga en caliente en ElectronJS – Part 1

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.

Varios marcos poderosos como Angular , AngularJS 1.x , React , React-Native , etc. implementan una herramienta como Webpack. Webpack es un paquete de módulos estáticos para aplicaciones JavaScript modernas. Es una poderosa herramienta que proporciona utilidades para hacer que el proceso de desarrollo sea más rápido y mejor. Una de las características más útiles proporcionadas por webpack es la capacidad de recarga en caliente. La capacidad de recarga en caliente permite al desarrollador modificar el código fuente del proyecto para reflejar instantáneamente los cambios en la salida/navegador sin actualizar todo el estado de la aplicación. El electrón no proporciona ningún módulo de recarga en caliente incorporado; sin embargo, aún podemos implementar la capacidad de recarga en caliente utilizando paquetes de código abierto. Este tutorial demostrará cómo implementar la recarga en caliente en Electron usando el paquete electron-reload npm y el paquete electron-reloader npm.

Suponemos que está familiarizado con los requisitos previos que se describen en el enlace mencionado anteriormente. Para que Electron funcione, node y npm deben estar preinstalados en el sistema.

• Estructura del proyecto:
  

Ejemplo: Comenzaremos construyendo la aplicación electrónica básica siguiendo los pasos dados.

• Paso 1: navegue a un directorio vacío para configurar el proyecto y ejecute el siguiente comando,

  npm init

  Para generar el archivo package.json . Instale Electron usando npm si no está instalado.

  npm install electron --save

  Este comando también creará el archivo package-lock.json e instalará las dependencias requeridas de node_modules . Una vez que Electron se haya instalado correctamente, abra el archivo package.json y realice los cambios necesarios con la clave de secuencias de comandos . Instale electron-reload usando npm y guárdelo como una dependencia de desarrollo.

  npm install electron-reload --save-dev

  Instale electron-reloader usando npm y guárdelo como una dependencia de desarrollo.

  npm install electron-reloader --save-dev

  Ambos paquetes respectivos se pueden usar para implementar Hot Reload en Electron.

  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"
    },
    "devDependencies": {
      "electron-reload": "^1.5.0",
      "electron-reloader": "^1.0.1"
    }
  }
  

• Paso 2: Cree un archivo main.js de acuerdo con la estructura del proyecto. Este archivo es el Proceso Principal y actúa como un punto de entrada a la aplicación. Copie el código Boilerplate para el archivo main.js como se indica en el siguiente enlace .

  principal.js:

  const { app, BrowserWindow } = require('electron')    function createWindow() {     // Create the browser window.     const win = new BrowserWindow({         width: 800,         height: 600,         webPreferences: {             nodeIntegration: true         }     })        // Load the index.html of the app.     win.loadFile('index.html')        // Open the DevTools.     win.webContents.openDevTools() }    // This method will be called when Electron has finished // initialization and is ready to create browser windows. // Some APIs can only be used after this event occurs. // This method is equivalent to 'app.on('ready', function())' app.whenReady().then(createWindow)    // Quit when all windows are closed. app.on('window-all-closed',() => {     // On macOS it is common for applications and their      // menu bar to stay active until the user quits      // explicitly with Cmd + Q     if (process.platform !== 'darwin') {         app.quit()     } })    app.on('activate',() => {     // On macOS it's common to re-create a window in the      // app when the dock icon is clicked and there are no      // other windows open.     if (BrowserWindow.getAllWindows().length === 0) {         createWindow()     } })    // In this file, you can include the rest of your  // app's specific main process code. You can also  // put them in separate files and require them here.

• Paso 3: Cree el archivo index.html dentro del directorio src . También copiaremos el código repetitivo para el archivo index.html del enlace mencionado anteriormente.
  índice.html:

  <!DOCTYPE html> <html>   <head>     <meta charset="UTF-8">     <title>Hello World!</title>     <!-- https://electronjs.org/docs/tutorial                            /security#csp-meta-tag -->     <meta http-equiv="Content-Security-Policy"            content="script-src 'self' 'unsafe-inline';" />   </head>   <body>     <h1>Hello World!</h1>     We are using node      <script>         document.write(process.versions.node)     </script>, Chrome      <script>         document.write(process.versions.chrome)     </script>, and Electron      <script>         document.write(process.versions.electron)     </script>.   </body> </html>

• Salida: para iniciar la aplicación Electron, ejecute el comando:

  npm start

  

Hot Reload en Electron: Hot Reloading solo debe implementarse en el entorno de desarrollo . Por lo tanto, debemos tener control sobre el entorno de la aplicación antes de implementar esta función. NodeJS nos proporciona una forma en la que podemos controlar el entorno de la aplicación a través del código utilizando Variables de entorno.

main.js : agregue el siguiente fragmento en ese archivo.

const env = process.env.NODE_ENV || 'development';

NODE_ENV es una variable de entorno que significa entorno de Node en NodeJS. Cuando se inicia una aplicación de Node, puede verificar esta variable de entorno y, en función del valor, realizar tareas adicionales y lógica de código. De acuerdo con la convención, solo debe haber dos valores definidos para la variable NODE_ENV , es decir, producción o desarrollo ; sin embargo, podemos definir tantos valores como sea necesario. Podemos definir un valor adicional como prueba para ejecutar casos de prueba automatizados dentro de la aplicación. Si no hemos establecido la variable de entorno y no hemos definido explícitamente el valor dentro del código, se establecerá de forma predeterminada en undefined .

• Para establecer el NODE_ENV en Windows desde el uso de Windows Powershell:

  $env:NODE_ENV="production"

• Para configurar NODE_ENV en Windows desde CMD use:

  set NODE_ENV=production

• Para configurar NODE_ENV en Linux y macOS use:

  export NODE_ENV=production

Nota: La variable NODE_ENV se restablecerá en el reinicio del sistema si se configura utilizando los métodos anteriores. Para mantener este valor en el Sistema, configúrelo en las Variables de entorno del sistema a través del Panel de control en Windows . También podemos configurar NODE_ENV en el inicio de la aplicación desde package.json actualizando el script de inicio .

• paquete.json:

  /..
  "start": "set NODE_ENV=development&&electron ."
  ../

En el código, hemos establecido NODE_ENV en desarrollo . Podemos implementar Hot Reload en Electron siguiendo cualquiera de los dos enfoques:

• Enfoque 1: uso del paquete npm de recarga de electrones .
  Este paquete se utiliza para cargar el contenido de todas las instancias de BrowserWindow activas dentro de Electron cuando se modifican los archivos de origen. El require(‘electron-reload’)(ruta, opciones) toma los siguientes parámetros. Para obtener información más detallada, consulte este enlace .
  • ruta: String La ruta de archivo deseada para observar y permitirle actualizar las Instancias de BrowserWindow en el cambio de código fuente.
  • opciones: Objeto (Opcional) Toma los siguientes parámetros
    • electron: String Para implementar un restablecimiento completo (Iniciar un nuevo proceso de electrones) al recargar, podemos especificar la ruta que apunta a los ejecutables de electrones.
    • hardResetMethod: string Si la aplicación electrónica anula el comportamiento predeterminado de cierre o cierre , como no cerrar todas las instancias de BrowserWindow , la recarga electrónica puede dejar varias instancias de la aplicación en ejecución. En tales casos, podemos especificar esta propiedad para cambiar el comportamiento predeterminado de electron-reload para salir en lugar de salir .

  main.js: agregue el siguiente fragmento en ese archivo.

  const path = require('path') const env = process.env.NODE_ENV || 'development';    // If development environment if (env === 'development') {     require('electron-reload')(__dirname, {         electron: path.join(__dirname, 'node_modules', '.bin', 'electron'),         hardResetMethod: 'exit'     }); }

  Producción:
  

• Enfoque 2: uso del paquete npm de recarga de electrones . Este paquete requiere Electron 5+ .

  De acuerdo con el comportamiento predeterminado del paquete electron-reloader , cuando se cambia el código fuente de los archivos utilizados en el proceso principal , la aplicación se reinicia, y cuando se cambia el código fuente de los archivos utilizados en la instancia de BrowserWindow o el proceso Renderer , la página se recarga El require(‘electron-reloader’)(módulo, opciones) toma los siguientes parámetros. Este paquete también observa la carpeta dist que se crea cuando construimos la aplicación. Para obtener información más detallada, consulte este enlace .

  • módulo: Objeto El objeto del módulo global . Este objeto se pasa para que el paquete pueda leer el gráfico del módulo y averiguar qué archivos pertenecen al proceso principal .
  • opciones: Objeto (Opcional) Toma los siguientes parámetros
    • debug: Boolean Imprime las rutas observadas y la información del archivo, como el nombre de archivo de los archivos que se están observando en el cambio de código fuente. El valor predeterminado es falso .
    • ignore: String[] Es una array de strings de expresiones Regex. Las expresiones Regex representan el patrón de los archivos/directorios que el paquete ignorará. De forma predeterminada, los archivos/directorios que comienzan con . , los archivos .map y las dependencias de node_modules se ignoran. Los patrones adicionales especificados se agregarán a estos patrones predeterminados.
    • watchRenderer: booleano Observe los archivos utilizados en el proceso Renderer y vuelva a cargar la ventana respectiva al cambiar el código fuente. El valor predeterminado es verdadero .

  Nota: el try/catch es necesario para que no arroje el siguiente error en el entorno de producción .

  Cannot find module 'electron-reloader'

  main.js: agregue el siguiente fragmento en ese archivo.

  const env = process.env.NODE_ENV || 'development';    // If development environment if (env === 'development') {     try {         require('electron-reloader')(module, {             debug: true,             watchRenderer: true         });     } catch (_) { console.log('Error'); }     }

  Producción:
  

  Salida de la consola: