在開發 Electron 應用程式時,設置熱重載非常方便,可以在不重新啟動應用程式的情況下進行更新。
你可以使用 npm 模組 electron-reloader 來達到這一目的。
假設你有以下這個示例 Electron 應用程式:
index.js
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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello World!</title>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>
作為開發用的相依套件,安裝 electron-reloader
:
npm install -D electron-reloader
然後在 index.js
檔案中加入以下程式碼:
try {
require('electron-reloader')(module)
} catch (_) {}
就是這樣!現在,當你使用 electron .
或者在 package.json
中有設定 "start": "electron ."
,應用程式檔案有任何更改時,它們將反映在應用程式視窗中。