概述

基于項目每次修改都需要重新運行npm start才能生效，這樣的開發效率很低，這里通過第三方配置可以解決自動加載更新electron

方案一：electron-reloader

1、安裝：

npm install electron-reloader --save-dev

2、主進程文件中配置(main.js/index.js)

try {
  require('electron-reloader')(module, {});
} catch (_) {}

3、重啟測試

更改js css html等文件都能自動加載更新electron

方案二：nodemon

1、安裝：

npm install --save-dev nodemon

2、package.json文件中配置

"scripts": {
  "start": "nodemon --watch main.js --exec electron ."
},

// electron . 的意思是監聽main.js文件

3、重啟測試

這里監聽的是main.js文件，所以更改了其他文件之后，還需要再重新保存（ctrl+s）main.js文件，并且html頁面刷新需要在electron應用頁面 ctrl+r或點擊菜單view-reload進行刷新

方案三：使用gulp、webpack等工具進行熱加載

1、安裝：

npm install gulp --save
npm install electron-connect -save

2、文件配置

創建gulpfile.js文件

const gulp = require('gulp');
const electron = require('electron-connect').server.create();
 
gulp.task('watch:electron', function () {
  electron.start();
  gulp.watch(['./index.js'], electron.restart);
  gulp.watch(['./ui/**/*.{js,css},./ui/index.html'], electron.reload);
});

修改package.json文件

"scripts": {
  "hot":".\\node_modules\\.bin\\gulp watch:electron"
},

修改主進程文件

const { app, Menu ,BrowserWindow} = require('electron');
const client = require('electron-connect').client;
 
// 保持一個對于 window 對象的全局引用，不然，當 JavaScript 被 GC，
// window 會被自動地關閉
let mainWindow = null;
 
// 當 Electron 完成了初始化并且準備創建瀏覽器窗口的時候
// 這個方法就被調用
app.on('ready', function () {
  // 創建瀏覽器窗口。
  mainWindow = new BrowserWindow({
    width: 800, 
    height: 600,
    webPreferences: {
      nodeIntegrationInWorker: true//支持多線程
    }
  });
  // 加載應用的 index.html
  mainWindow.loadURL('file://' + __dirname + '/ui/index.html');
 
  // 打開開發工具
  mainWindow.openDevTools();
 
  // 當 window 被關閉，這個事件會被發出
  mainWindow.on('closed', function () {
    // 取消引用 window 對象，如果你的應用支持多窗口的話，
    // 通常會把多個 window 對象存放在一個數組里面，
    // 但這次不是。
    mainWindow = null;
  });
  client.create(mainWindow);
});

修改渲染進程文件

在index.html文件中添加

 // 創建 client
require('electron-connect').client.create();

3、測試

使用npm run hot即可運行項目

注意：修改主進程文件，后自動重啟窗體；修改html、css文件存在無效的情況，可以使用ctrl+r快捷鍵刷新

總結：方案一最方便&簡單