最近あまりElectronいじってなかったのですが、
気が付いたらElectron 1.7系のstable版となるv1.7.5がリリースされてました。
てことで、以前書いたElectron+TypeScriptのサンプルコードを最新バージョンに対応させておきました。
Electron/TypeScriptそれぞれを以下のバージョンに更新してます。
- Electron 1.7.5
- TypeScript 2.5.2
Electronの型定義ファイル
Electronのパッケージ内に、TypeScript向け型定義ファイルが同梱されるようになりました。
V1.6.x系の途中から型定義ファイルが含まれるようになってたみたいです。
↓のようにelectronのパッケージ内に.d.tsファイルが含まれるようになってます。
ってことで、もう@types/electronをnpmから取得せずとも、TypeScriptでバッチリ使えるようになっています。
だいぶ便利になりましたね!!
TypeScript2.2.x系以降で使うために
TypeScript 2.2.1以降で、require/importなどが含まれるコードをトランスパイルすると、
以下のようなコードがトランスパイル結果の先頭に付与されるようになってます。
Object.defineProperty(exports, "__esModule", { value: true});
(CommonJSなどを指定してトランスパイルした場合)
このコードは、実行環境がNode.jsなどでrequireが使える環境であれば問題なく実行できます。
しかし、Electronはrequireでのモジュール読み込みはできますが、exportsなどの変数が用意されていません。
そのためUncaught ReferenceError: exports is not definedというようなエラーが出てしまいます。
そんな時は、html側に以下のようなコードを足すとこのエラーを回避できます。
<!DOCTYPE html><html><head><metacharset="UTF-8"><title>Hello World!</title><!-- ↓このコードを、index.jsを読み込む前の部分に足す --><script>window.exports = module.exports</script><scriptsrc="index.js"></script></head><body><h1>Hello World!</h1><hr/><buttononclick="hello()">Show Message</button></body></html>
ちょっとダーティなハックって感じですが、お手軽な対処になると思います。
根本的な対処
根本的に対処するなら、html側からスクリプト読む際は以下のようにrequire関数を通すようにします。
<!DOCTYPE html><html><head><metacharset="UTF-8"><title>Hello World!</title><script>window.exports = module.exports</script></head><body><h1>Hello World!</h1><hr/><buttonid="btnShowHello">Show Message</button><script>// You can also require other files to run in this process require('./index.js') </script></body></html>
requireした先のコンテキストではexportsなどが定義されていて、CommonJSなコードが普通に解釈できるようです。
GitHubにあげたサンプルコードでは、こちらの方法で対処しました。
ちなみに、electronの公式サンプルコードもこの方法scriptを読み込むようになっています。
https://github.com/electron/electron-quick-start/blob/master/index.html
ということで、<script src="index.js"></script>と書かずにscriptタグ内にrequire関数を書いて読む方がよいかもしれません。
その他
electron v1.5系ではWebComponents、v1.6系でCSS Grid Layoutが使えるようになっています。
(v1.5系はpre-release版だけでstableのリリースがなかったため、実質的には両方ともv1.6系から使えるようになった、という感じかも)
以前↓で書いたようなことが、普通に使えるようになっています。 sourcechord.hatenablog.comsourcechord.hatenablog.com
この辺は、また日を改めてサンプルコードを書いてみようと思います。