Electronでのjsファイルの取り扱い
通常ならばReactのボイラーテンプレートに備わっているホットリロードなどのデフォルト機能を用いて行う工程を、お手製のスクリプトで一纏めにしなければならないときがあると思います。私の場合ですが、XSS対策としてCSP(Content-Security-Policy)のnonce値を設定する必要があり、勝手にjsxファイルをソースコードに差し込まれると困るため、別途jsxファイルをトランスパイルしてみました。今回の処理については、webpackでも問題なく同様の処理ができます。むしろwebpackの方が簡単でわかりやすいかも（汗）
当初しようしていたコード
npx babel app/renderer/control.jsx --out-file app/renderer/control-compiled.js --presets @babel/preset-envelectron .上記のように２回にわけてコマンドを実行していましたが、非常に面倒でターミナルも無駄に汚します。
次にpackage.jsonで下記のようにしてから実行を試みます。
"scripts": {
"start:control": "npx babel --watch app/renderer/control.jsx --out-file app/renderer/control-compiled.js",
"start": "yarn start:control && electron ."
}使用する際には、下記のみをターミナル上で実行します。
npm run startしかしここで問題が発生。監視しているはずの–watchフラグでプロセスが止まってしまい、「electron .」へは到達できず。これは、Babelの–watchフラグはファイルが変更されるたびに実行を維持し続けるため、トランスパイルが完了するまで待機することが難しいという問題。つまり、トランスパイルが永遠に続くため、正しく機能しないということ。
トランスパイルと起動をやりくりするスクリプトを作成する
ファイル名は「start.js」にしました。
const fs = require('fs');
const { exec } = require('child_process');
const sourceFile = 'app/renderer/control.jsx';
const compiledFile = 'app/renderer/control-compiled.js';
let isCompiling = false;
function compileAndStartElectron() {
if (isCompiling) {
console.log('Compilation is already in progress, waiting...');
return;
}
isCompiling = true;
const compileProcess = exec(`npx babel ${sourceFile} --out-file ${compiledFile} --presets @babel/preset-env`);
compileProcess.on('exit', (code) => {
isCompiling = false;
if (code === 0) {
console.log('Compilation complete, starting Electron...');
startElectron();
} else {
console.error('Compilation failed.');
}
});
}
function startElectron() {
const electronProcess = exec('electron .');
electronProcess.on('exit', (code) => {
console.log(`Electron process exited with code ${code}`);
});
}
// ファイルの変更を監視
fs.watch(sourceFile, (event) => {
if (event === 'change') {
console.log('File changed, recompiling...');
compileAndStartElectron();
}
});
// Electronを起動
compileAndStartElectron();フラグを用いてファイルの変更を監視し、変更後にElectronを起動させるコードになっています。普段巷で嫌われているexec関数ですが、あくまでも開発時のトランスパイルのみで使用するだけです。exec関数の中身は、先述したコマンドと同様です。また、ディレクトリの部分は「sourceFile（元ファイル）」と「compiledFile（トランスパイル先）」を書き換えるだけなので、ご自身の開発にも簡単に流用できるかと思われます。
実行コマンドについてですが、ファイル名が「start.js」なのでpackage.jsonを一旦下記のようにしておきます。非常にシンプルになりました。
"scripts": {
"start": "node start.js"
}
従って、実行コマンドは下記のようになります。
npm run start
以上です。
Be the first to comment