忘れないように記録しとこ

カバの樹

ElectronのRenderer Process（index.html）でrequire('electron')がundefinedになる

2016年11月22日

完全版を表示する

動作環境

electron: 1.3.9

 

Electronにハマった

最近、デスクトップアプリを作るのにハマってます。
特にElectronは良い！

ブラウザベースのアプリで、HTMLとjavascriptの知識があれば、色々作れます。
node.jsの知識があれば、アプリ内にWEBサーバーを立ち上げたりってこともできます。

WordPressデスクトップアプリや、Atomや、Visual Studio codeもこのElectronベースに作られているらしいです。

導入も簡単で、いろんな人が解りやすく説明してくださっているので、当ブログでは説明しません。

おすすめはこちら↓
http://qiita.com/nyanchu/items/15d514d9b9f87e5c0a29
Electronってなに？って方は以下URLが分かりやすい
http://postd.cc/essential-electron/?utm_content=buffer042c0&utm_medium=social&utm_source=facebook.com&utm_campaign=buffer

 

本題

今回の記事のテーマは、ElectronのRenderer Process（HTML）側でrequire('electron')を使うと、中身がundefinedになってしまう現象です。
一応、本家のFAQにも記事がありましたが、備忘録的な意味で記事を書きます。

 

■本家FAQ part1
require('electron').xxx is undefined

なんか英語の記事でよく分からなかったです。
そして、自分がハマったのは、これではありませんでした。

 

■本家FAQ part2
I can not use jQuery/RequireJS/Meteor/AngularJS in Electron

管理人がハマった原因はこっちでした。

英語で書いてあるので、さっぱり分からずですが、そこは持ち前のフィーリングでカバー

 

ElectronではjQueryとか使えない

一応は仕様です。
そして、どうしても使いたい場合はどうするの？
というのが、「本家FAQ part2」です。

■BrowserWindowのオプション
http://electron.atom.io/docs/api/browser-window/#new-browserwindowoptions

 

const {BrowserWindow} = require('electron')
let win = new BrowserWindow({
 webPreferences: {
 nodeIntegration: false
 }
})
win.show()

これでjQeryが使えるようになります。

た・だ・し

Renderer ProcessでElectron APIが使えなくなります！

つまり、require('electron')がundefinedになる

これはいけない、どハマりする。
実際した！

 

解決

上で使ったBrowserWindowのオプションを利用しない。
これで、解決です。

しかし、そうするとjQueryが使えなくなってしまう。

というわけで、この解決法も「本家FAQ part2」に記載されています。

今回は、index.htmlを例として以下の設定を記載する。

<script>
  window.nodeRequire = require;
  delete window.require;
  delete window.exports;
  delete window.module;
</script>
<script type="text/javascript" src="jquery.js"></script>
<script>
  const ipc = window.nodeRequire('electron').ipcRenderer
  ipc.send('show-context-menu-form')
</script>

これで、Electron API　も使えますし、jQueryも使えます。

今日はこの辺で～

  • B!