electron-reloadとgulp.watchでjsxをホットリロードする

electron-loadとgulpでjsxの変更を即時反映する。

hot reloadとかlive reloadで検索すると、2つのモジュールをよく目にした。

• electron-connect - npm
• electron-reload - npm

この2つ。前者は、gulpでelectronを実行するという感じで書かれていた。 実行方法を変えるのは少し抵抗感があるので、main.jsに追記するだけで済むという後者を選んだ。

そんな理由で使ってみたelectron-reloadだが、gulp watchとも連携してくれる（連携というかchokidarインスタンスを渡すだけ）ようで、babelを使ったreact+jsxのjsへのトランスパイルもホットリロードできた。

参考: watch() · gulp.js

導入する

npm install -D electron-reloadするだけ。あとは、electron実行時のスクリプトに少し追記する。

// main.js
...
const gulpscript = require('../../gulpfile');
const appRoot = path.dirname(path.dirname(__dirname));
require('electron-reload')(appRoot, {
    electron: path.join(appRoot, 'node_modules', '.bin', 'electron'),
    chokidar: gulpscript.watch(),
});
...

// gulpfile.js
var gulp = require('gulp');
...
function watch() {
    // これが`chokidar`インスタンスを返す
    return gulp.watch(paths.babel.src, transpileByBabel);
}
// used on electron-reload at src/main/main.js
exports.watch = watch;
...

実行する

上の設定がうまくいけば、いつも通り、npm startするだけでいける。jsxの文言を変えてみるとリロードされた。