概述
基于项目每次修改都需要重新运行
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快捷键刷新
网友评论