/

如何在 Electron 中設置熱重載

如何在 Electron 中設置熱重載

在開發 Electron 應用程式時，設置熱重載非常方便，可以在不重新啟動應用程式的情況下進行更新。

你可以使用 npm 模組 electron-reloader 來達到這一目的。

假設你有以下這個示例 Electron 應用程式：

index.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
const { app, BrowserWindow } = require('electron')

function createWindow() {
 // 建立瀏覽器視窗
 const win = new BrowserWindow({
 width: 800,
 height: 600,
 webPreferences: {
 nodeIntegration: true,
 },
 })

 // 載入應用程式的 index.html
 win.loadFile('index.html')
}

app.whenReady().then(createWindow)

index.html

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8" />
 <title>Hello World!</title>
 </head>
 <body>
 <h1>Hello World!</h1>
 </body>
</html>

作為開發用的相依套件，安裝 electron-reloader：

1
npm install -D electron-reloader

然後在 index.js 檔案中加入以下程式碼：

1
2
3
try {
 require('electron-reloader')(module)
} catch (_) {}

就是這樣！現在，當你使用 electron . 或者在 package.json 中有設定 "start": "electron ."，應用程式檔案有任何更改時，它們將反映在應用程式視窗中。