はじめに
Electronなどを使っていると
いわゆるホットリロード機能がほしくなります。
このホットリロードとは、
現在自分の扱っているElectronのディレクトリ以下にファイル変更があった場合、自動検知して、もう一度ファイル変更をそのまま実行し
いちいちCtrc-C、起動を自分でやらなくてよい！
という機能です。
うれしい。
Vue CLIなどや、Webpack --watchモードなどが特に有名だったりする気がします。
方法
ホットリロード機能を使うにはまず
npm install electron-reload
をnpmで入れてください。
electron-reloadは、ファイル変更を検知して自動更新するパッケージです。
その後、Electronのエントリポイントのファイルに
以下のような記述を行います。
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のメインプロセスの修正だと、コメント文を少し直しただけでいちいちアプリが消える->付くが繰り返されるので面倒っちゃ面倒
（研究室のパソコンが重いので辛い、家でなら全然大丈夫そう）