Electron 1.7.5 + TypeScript 2.5.2のサンプル

最近あまり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ファイルが含まれるようになってます。
f:id:minami_SC:20170908003051p:plain

ってことで、もう@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>
    <meta charset="UTF-8">
    <title>Hello World!</title>
    <!-- ↓このコードを、index.jsを読み込む前の部分に足す -->
    <script>window.exports = module.exports</script>
    <script src="index.js"></script>
  </head>
  <body>
    <h1>Hello World!</h1>
    <hr/>
    <button onclick="hello()">Show Message</button>
  </body>
</html>

ちょっとダーティなハックって感じですが、お手軽な対処になると思います。

根本的な対処

根本的に対処するなら、html側からスクリプト読む際は以下のようにrequire関数を通すようにします。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
    <script>window.exports = module.exports</script>
  </head>
  <body>
    <h1>Hello World!</h1>
    <hr/>
    <button id="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関数を書いて読む方がよいかもしれません。