ElectronでjQueryがundefinedになる #JavaScript

ElectronでjQueryがundefinedになる。

index.html

<body>
    <script src="lib/jquery.min.js"></script>
    <script>
        jQuery('#hoge'); // jQuery is not defined
    </script>
</body>

原因

electronのissueがあった。

jQuery isn't set globally because "module" is defined · Issue #254 · atom/electron

Electronではブラウザ側のJS実行時にmodule.exportsが存在するので、jQueryがcommonJSでロードされたと勘違いして、windowに$とjQueryを定義しないというのが原因。（この辺りにif文が）

解決策

requireでロードする

<!--<script src="lib/jquery.js"></script>-->
<script>
window.jQuery = window.$ = require('./lib/jquery');
</script>

上記のようにrequireでロードしてwindow.$, window.jQueryに代入する。

'node-integration': false

メインプロセス側JSでBrowserWindowをインスタンス化する時のオプションに'node-integration': falseを追加する。

main-process.js

// In the main process.
const {BrowserWindow} = require('electron')
let win = new BrowserWindow({
  webPreferences: {
    nodeIntegration: false
  }
})
win.show()

そうすると、ブラウザ側にmodule.exportsが定義されなくなるので、ブラウザ側JSを修正する必要がない。

基本的にはBrowserifyやWebpackなどを使ってCommonJSで開発して、アプリのWebViewみたいにElectron外のWebページを表示させたい場合はnode-integrationオプションを使って制御するのがよさそう。