Electron热加载配置

在上一篇博客《Electron初探》中，简单介绍了 Electron的安装、配置和Demo开发。我们会发现，基于简单的Demo，每次修改都需要重新运行npm start才能生效，这样的开发效率很低。这一篇博客简单的介绍下Electron热加载的配置：electron-reloader。

electron-reloader安装

执行下面的npm命令来安装electron-reloader。

npm install --save-dev electron-reloader

安装成功后，package.json内容如下：

{
  "name": "demo",
  "version": "1.0.0",
  "description": "a Electron Demo Application",
  "main": "main.js",
  "scripts": {
    "start": "electron .",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Woods",
  "license": "ISC",
  "devDependencies": {
    "electron": "^9.1.0",
    "electron-reloader": "^1.0.1"
  }
}

然后，我们在main.js（Electron项目入口文件）文件中增加如下代码，引入electron-reloader。

const { app, BrowserWindow } = require('electron')

// 热加载
try {
  require('electron-reloader')(module,{});
} catch (_) {}

function createWindow () {   
  // 创建浏览器窗口
  const win = new BrowserWindow({
...

最后，通过electron的启动命令重新启动项目。

npm start

这个时候，当我们修改项目文件，就可以直接在项目窗口中看到变化了，无须每次重新启动项目。

2020年7月8日