JavaScript
Electron

ElectronでjQueryがundefinedになる

More than 1 year has passed since last update.

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

http://electron.atom.io/docs/faq/#i-can-not-use-jqueryrequirejsmeteorangularjs-in-electron

メインプロセス側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オプションを使って制御するのがよさそう。