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

這個時候，當我們修改項目文件，就可以直接在項目窗口中看到變化了，無須每次重新啓動項目。