休日を半日使ってしまったのでメモ。
エラーになるまでの流れ
最初はBrowserifyで
簡単なメモアプリを作りたかったので、とりあえずElectronで作ってみようということで、テンプレ的なところを作りました。
Gulp+Babel+Browserifyで作成しました。
const app = require('app');
const BrowserWindow = require('browser-window');
let mainWindow = null;
app.on('window-all-closed', function () {
if (process.platform != 'darwin') {
app.quit();
}
});
app.on('ready', function () {
mainWindow = new BrowserWindow({
width: 800,
height: 600,
center: true,
resizable: true,
'node-integration': false
});
mainWindow.on('closed',function () {
mainWindow = null;
});
mainWindow.loadUrl(`file://${__dirname}/index.html`);
});
メインプロセスはこんな感じのコードですね。テンプレです。
jQueryをHTMLで <script src="lib/jquery-2.2.0"></script> といった感じで読み込みたかったので、 nodeIntegration: false を指定しました。
作ってみたはいいものの、npmでjQueryの管理ができるみたいだったので、そっちに乗り換えました。
npm install --save jquery
Electronはレンダラプロセスでも require 文が使用でき、npmでインストールしたjQueryもそれを使用するとのことなので、早速試してみました。
const $ = require('jquery');
$(document).ready(function () {
// 処理
});
実行！
……するとエラーが発生して動作しません。
レンダラプロセスのjs上で require('jquery'); とするとエラーになってしまいます。
Browserifyを外して実行
「Browserifyがrequireを書き換えちゃうから、それを外したらできるよ！」といった感じの記事を見かけたので試してみたのですが、同じようにエラーとなってしまいました。
ここまでは情報があった
日本語のページでそれなりに探したものの、ここまでの情報しか見つけられませんでした。
解決へ
英語が嫌いな私は、ここまで来てようやくElectronの公式ドキュメントに目を通し始めました。
というかドキュメントのFAQのページで「jQuery」で検索かけました。
そしたら次のような記載が。
js
// In the main process.
var mainWindow = new BrowserWindow({
webPreferences: {
nodeIntegration: false
}
});
> ```html:HTML
<head>
<script>
window.nodeRequire = require;
delete window.require;
delete window.exports;
delete window.module;
</script>
<script type="text/javascript" src="jquery.js"></script>
</head>
前後の英語は見るのすらきついので読んでません。
要するに、「windowにrequire（やexports、module）が追加されているけど、nodeIntegrationをfalseに設定すると削除されますよ」ということっぽい？
ということで早速メインプロセス側のjsを修正。
該当行を削除するだけなのでソースは割愛です。
それで解決しました。
おわりに
jQueryを使えるようにするオプションでjQueryが使えなかったという皮肉な結果ですね。
自分が設定したオプションの意味をしっかりと理解しておきましょう。