読者です 読者をやめる 読者になる 読者になる

SourceChord

C#とXAML好きなプログラマの備忘録。最近はWPF系の話題が中心です。

Electron 0.35.0以降での変更点

Electron TypeScript Node.js VSCode

久しぶりに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のデバッガから起動して、ちゃんとデバッガでの動作ができるようになりました。

f:id:minami_SC:20151129130855p:plain

これで、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
        }
    ]
}