はじめに

Electronなどを使っていると
いわゆるホットリロード機能がほしくなります。

このホットリロードとは、
現在自分の扱っているElectronのディレクトリ以下にファイル変更があった場合、自動検知して、もう一度ファイル変更をそのまま実行し
いちいちCtrc-C、起動を自分でやらなくてよい！
という機能です。
うれしい。

Vue CLIなどや、Webpack --watchモードなどが特に有名だったりする気がします。

方法

ホットリロード機能を使うにはまず

npm install electron-reload

をnpmで入れてください。
electron-reloadは、ファイル変更を検知して自動更新するパッケージです。

その後、Electronのエントリポイントのファイルに
以下のような記述を行います。

main.js

const electron = require('electron');
const app = electron.app;
const BrowserWindow = electron.BrowserWindow;
const ipcMain = electron.ipcMain;
const fs = require('fs');

/*
*
* 第一引数がおそらく監視したいディレクトリフォルダ
* 第二引数がおそらくElectronの実行フォルダ
*
* */
require('electron-reload')(__dirname, {
    electron: require('${__dirname}/../../node_modules/electron')
});

let mainWindow = null;

app.on('window-all-closed', function () {
    if (process.platform !== 'darwin') {
        app.quit();
    }
});

コメント文のあるrequire('electron-reload')の行を書くだけで
ホットリロードがうまく起動するようになります。

ただし、第２引数では、自分の環境では

グローバルにElectron
自分のプロジェクトにローカルのElectron

の両方を取り入れています。
そのため、第2引数では、自分のプロジェクトのローカルのElectronを指定しています。

効果

エントリポイント、つまりメインプロセスのmain.jsに変更を行うと、Electron自体再実行されるらしく、すべてのウィンドウプロセスが消去されて自動で完全終了、完全再起動が実行されます。

ウィンドウプロセス、つまりindex.html側などの各ウィンドウのファイルを修正すると、メインプロセスには影響が出ないため、完全再起動にはならず、差分修正で非常に早いです。

まとめ

結構便利だけど、main.jsのメインプロセスの修正だと、コメント文を少し直しただけでいちいちアプリが消える->付くが繰り返されるので面倒っちゃ面倒
（研究室のパソコンが重いので辛い、家でなら全然大丈夫そう）

Electronでホットリロード開発をしたい！

はじめに

方法

効果

まとめ