如何在Electron上設置熱重裝

在Electron應用程序上工作時,設置熱重裝非常方便,這樣應用程序無需重啟就可以更新。

您可以使用npm模塊做到這一點電子再裝彈機

假設您有以下電子示例應用程序:

index.js

const { app, BrowserWindow } = require('electron')

function createWindow() { // Create the browser window. const win = new BrowserWindow({ width: 800, height: 600, webPreferences: { nodeIntegration: true, }, })

// and load the index.html of the app. 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

Then add this line to the index.js file:

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

and that’s it! Now when you start the application using electron ., or npm start if you have

"start": "electron .",

in your package.json, any change you apply to the application files will be reflected in the application window.


More devtools tutorials: