Electronでホットリロードを設定する方法

Electronアプリで作業する場合、ホットリロードを設定すると非常に便利です。これにより、アプリケーションを再起動せずに更新できます。

あなたはnpmモジュールを使用してそれを行うことができます電子リローダー

このサンプルElectronアプリケーションがあるとします。

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: