如何在Electron项目中使用实时重载

本文概述

• 1.安装Electron装填器
• A.为你的内容实施实时重新加载
• B.对Electron和内容进行实时重新加载

许多使用诸如ReactJS或Angular之类的框架的Web开发人员倾向于实现诸如Webpack之类的捆绑器, 该捆绑器包含许多实用程序, 以使开发过程更流畅, 更快捷。 Webpack最有用的功能之一是热重载功能, 它可以更新在项目中修改过的文件, 而无需更新应用程序的整个状态, 而只是更改了整个状态。

尽管Electron尚不支持热重装, 但是你可以使用开源模块来实现实时重装功能。文件更改时, 实时重新加载会重新加载或刷新整个应用程序。因此, 例如, 如果你使用某个动态导航元素(例如带有JavaScript的列表), 并且位于其中的某个标签中, 并决定对JS代码进行更改, 那么实时重新加载会重新启动该应用并将其重新加载到导航元素上的初始项。

1.安装Electron装填器

当源文件更改时, Electron重新加载是在Electron中加载所有活动浏览器Windows内容的最简单方法。因此, 它在你的项目上实现了实时重新加载功能。要在你的Electron项目中安装此模块, 请使用终端切换到Electron项目的目录并执行以下命令：

npm install electron-reload

实现实时重新加载的其他大多数解决方案都过于复杂, 需要花费一些时间来实现, 例如, 实现HTTP服务器, 然后配置套接字等。”简单任务”的内容太多了。有关此库的更多信息, 请访问Github上的官方存储库。

A.为你的内容实施实时重新加载

如果你不修改只处理Electron的JavaScript, 而只修改自己的代码(前端), 那么对内容进行实时重新加载就足够了。你需要做的就是要求Electron重新加载模块带有项目文件夹的路径, 一旦文件更改, 该文件夹将触发实时重新加载。对于默认项目, 可以在需要Electron模块后在main.js文件上执行此操作：

const electron = require('electron')

// Enable live reload for all the files inside your project directory
require('electron-reload')(__dirname);

对于大多数情况, 这应该足够了。但是, 前面的代码仅刷新所有BrowserWindows的WebContent。因此, 如果你想进行硬重置(这意味着开始新的Electron过程), 请检查下一步。

B.对Electron和内容进行实时重新加载

如果你想进行硬重置(开始新的Electron过程), 则可以将路径传递到options对象中的Electron可执行文件。例如, 如果你已经安装了Electron设备, 则可以在main.js文件中进行操作：

const electron = require('electron')

// Enable live reload for Electron too
require('electron-reload')(__dirname, {
    // Note that the path to electron may vary according to the main file
    electron: require(`${__dirname}/node_modules/electron`)
});

并且, 当你在处理Electron代码或前端代码的JS文件中进行更改时, 该应用程序将被重新加载(仅当为Electron代码时才硬加载)。

编码愉快！