Electron + TypeScriptメモ

前回の記事にも書いたけど,最近TypeScriptを触ってる.ついでにElectronも触ってる. browserifyでbundleしたら動かなくて詰まったので,備忘録として再度メモ.

やりたかったこと

  1. browserifyを使ってts -> js -> bundle
  2. renderer process上でbundleしたものを読み込む
  3. renderer process上でfsなどnodeモジュールを使う

つまったとこ

3の部分でfsなどがundefinedになる.

原因

イマイチよくわかってない.

qiita.com

こちらの記事によると(CoffeeScriptをつかっているけど)

fs とかの node.js ビルトインモジュールを electron 側で require できます

らしい.

qiita.com

こちらの記事では,BrowserProcess側もbrowserifyしちゃうとだめとは書いてあるけど,今回はRenderer側しかbrowserifyしてないので,あまり関係なさそう?

実際にwebpackで生成されたコードをみると,

(function(module, exports) {
module.exports = require("fs");
}),
/* 中略 */
const fs = __webpack_require__(0);

のようになっていて,webpack_requireなるファイル先頭に定義された関数でモジュールを読み込んでるっぽい.

まだJavascriptのモジュール周りとかの挙動がわからないまま書いてるから,結局みてもよくわからんかった.Renderer側でも使えるようにElectronがexportsしてくれるけど,browserifyが全部必要なモジュールをまとめてて,名前空間(この呼び方が正しいかもわからない)が別になってるからかなーと思ってる.なので,@typesのnodeモジュールだけじゃなくて,Electron自体のコードを含んだパッケージも追加してあげると動くような気がする.

Webpack

Webpackだとwebpack.config.jsでtargetパラメータにelectronを指定できるのでよしなにやってくれる.

そもそもトレンド的にもwebpack使っといたほうが良さそう.

f:id:Inaab:20170311000543p:plain