久しぶりにelectronのドキュメントやらリポジトリやら見てたら、結構変わってたのでφ(..)メモメモ。
とりあえず、これを書いてる現時点では、0.35.2が最新となっています。
で、以前Electronで遊んでた時のバージョン(0.34.x)から色々と変更点があるので、それらをメモしときます。
0.35.0の変更点は以下のリンクから。
https://github.com/atom/electron/releases/tag/v0.35.0
APIのUrlという部分はURLに変更
各種メソッドなどで、○○Urlなどとなっていた部分が、○○URLというように、大文字での表記に変わりました。 古いメソッド名も、まだ動作していますが、duprecatedとなっているので近いうちに使えなくなるかと思います。
loadUrlメソッドも、以下のような書き方に変わりました。
mainWindow.loadURL('file://' + __dirname + '/index.html');
electronモジュール
BrowserWindowやMenuモジュールなどなど、electronのAPIは今までは別々のモジュールに定義されてました。
これらをすべて統合したelectronモジュールが追加されています。
今までのBrowserWindowやMenuモジュールなどもelectronモジュール内に含まれています。require('electron').BrowserWindowという風に書いて利用できます。
一応、今まで通りrequire('browser-window')とかやっても使えるみたいです。
ですが、ドキュメントなどではこのelectronモジュールを使った書き方に変わってるので、今後はこっちを使ったほうがいいのかも。
ipcモジュールの名前変更
以前までは、Mainプロセス用ipcモジュールと、Rendererプロセス用のipcモジュールがありました。
どちらもrequire('ipc')と書いてインポートしてましたが、そのスクリプトがMainプロセスで実行されるか、Rendererプロセスで実行されるかにより、読み込まれるモジュールが変わるという仕様でした。
これが、electronモジュール内に定義された「ipcMain」「ipcRenderer」という名前の別々のクラスとなりました。
また、今までのipcモジュールはduprecatedとなっています。
今後は以下のように使うみたい。
// Mainプロセスの場合
const ipcMain = require('electron').ipcMain;
// Rendererプロセスの場合
const ipcRenderer = require('electron').ipcRenderer;TypeScriptで使う場合、今までは同名のipcモジュールが重複して存在し、うまいこと型定義ファイルが書けない状態でした。
今回の変更は、TypeScriptの型定義ファイルを作る上でもメリットありそうです。
TypeScript用の型定義ファイル
TypeScript関係でもう一点。
この辺のモジュール変更には、DefinitelyTypedの型定義がまだ追いついていません。
https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/github-electron
だれか、型定義修正して上げてくれる人いないかなぁ。とか他力本願で待機中。
自分で型定義書いてみようかな。。。
VSCodeのデバッガとの連携
今まで、VSCodeからelectronのアプリのデバッグ実行をしても、ブレークポイントなどが効かず、デバッグ実行できませんでした。
VSCodeのバージョンアップで変わったのか、electronのバージョンアップで変わったのか、どちらかわかりませんが、、
以下のように、launch.jsonを書いておくと、VSCodeのデバッガから起動して、ちゃんとデバッガでの動作ができるようになりました。
これで、electronのmainプロセスのデバッグが捗りそうです。
launch.json
{"version": "0.2.0", "configurations": [{"name": "Launch Electron App", "type": "node", "request": "launch", "program": "main.js", "stopOnEntry": false, "args": [], "cwd": ".", "runtimeExecutable": "node_modules\\.bin\\electron.cmd", "runtimeArgs": ["--nolazy"], "env": {}, "externalConsole": false, "sourceMaps": false, "outDir": null}, {"name": "Attach", "type": "node", "request": "attach", "port": 5858 }]}