使用Electron进行桌面端开发时的热加载方案

publish:December 17, 2020 -Thursday by 04007 本站原创文章,转载请注明文章出处：www.04007.cn

本文地址:http://www.04007.cn/article/953.html

执行下面的npm命令安装electron-reloader。慢的话使用cnpm吧，安装成功后，package.json内容会自动修改。本文地址:http://www.04007.cn/article/953.html,未经许可,不得转载.

#安装electron-reloader
npm install --save-dev electron-reloader

#package.json内容自动修改如下
{
  #package.json会自动增加devDependencies这项
  "devDependencies": {
    "electron": "^9.1.0",
    "electron-reloader": "^1.0.1"
  }
}

本文地址:http://www.04007.cn/article/953.html,未经许可,不得转载.

需要我们操作的一步就是在main.js（Electron项目入口文件）文件中增加如下代码：本文地址:http://www.04007.cn/article/953.html,未经许可,不得转载.

#main.js文件修改
const {app, BrowserWindow } = require('electron')

//热加载 以下为增加部分
try {
	#引入electron-reloader。
  require('electron-reloader')(module,{});
} catch (_) {}
//以上为增加部分

function createWindow () {   
...

本文地址:http://www.04007.cn/article/953.html,未经许可,不得转载.

修改完成后，使用electron的启动命令npm start重新启动项目。然后当我们修改项目文件，就可以直接在项目窗口看到变化，而不用每次重新启动窗口。本文地址:http://www.04007.cn/article/953.html,未经许可,不得转载.

本文地址:http://www.04007.cn/article/953.html 未经许可,不得转载. 手机访问本页请扫描右下方二维码.