Electron + TypeScript + Webpack + React + HMRの環境まとめ

TypeScriptを使ったElectronの環境がなかったので作成しました。
シンプルな構成になってますので、ぜひ使ってみてください。

参考ページ

Re:ゼロから始めるElectron開発生活 - Qiita
この記事は ( 10日目の記事です。 こんにちは。(

構成がシンプルで理想のTypeScriptを使っていない以外、理想の環境でした。
ですが、各モジュールのバージョンが古く、そのまま使うのはおすすめできません。

electron-react-boilerplate/electron-react-boilerplate
Live editing development on desktop app. Contribute to electron-react-boilerplate/electron-react-boilerplate development by creating an account on GitHub.

こちらはスターの数も多く、アップデートも頻繁です。
TypeScriptも今後対応されるようなので、対応した際はこちらを利用するかもしれません。

Compiler Options · TypeScript

TypeScriptのコンパイルのオプションに関するドキュメントです。

Concepts

Webpackのドキュメントです。

ポイント

ファイル構成、利用モジュールなどはgithubを参考にしていただくとして、各設定でおさえておきたいポイントを説明します。

tsconfig.jsonの設定

    "module": "commonjs",

moduleはcommonjsを使用します。
Electronなのでtargetは今回指定する必要はありません。
uglifyなどの圧縮を行う場合、tsでes6に変換し、webpackでes5に変換しuglifyという手順を踏む必要がでてくるかもしれません。

package.jsonの設定

npm-run-allで簡潔な記述で順次スクリプトを実行しています。
–config-nameを指定して必要ファイルのみコンパイルしています。
(webpack.config.jsのnameオプション初めて使いました。)

"scripts": {
	"start": "npm-run-all -s build:main electron",
	"build": "webpack",
	"build:main": "webpack --config-name main",
	"electron": "NODE_ENV=development electron ./dist/js/main/index.js",
	"server": "NODE_ENV=development webpack-dev-server --config-name renderer"
},

苦労した点

HMRが動いていると思っていた

react-hot-loaderをインストールしてない状態でもページがリロードされ更新されるんですね。
仮想デスクトップ使って確認していたので、HMR動作してると思い込んでました。。

HMRが動かない

webpack-dev-serverはBabelを通すことで安定して動作するようです。
以下の順で構成を変更して、最終的にBabelで全てコンパイルしする形で動作するようになりました。

TypeScript + webpack-dev-server
TypeScript → Babel + webpack-dev-server
Babel(TypeScript) + webpack-dev-server

gaearon/react-hot-loader
Tweak React components in real time. Contribute to gaearon/react-hot-loader development by creating an account on GitHub.

まとめ

今回作成した環境は以下にアップしています。
既存の開発環境を使うだけでは、少し独自の処理を追加したい時などに経験上かなり苦労します。
一から理解しながら作成することで、無駄のないカスタマイズしやすい環境が用意できるので、
以下のソースを参考に構築してみください。

matometaru/ts-electron
tyescript electron dev. Contribute to matometaru/ts-electron development by creating an account on GitHub.

間違い、改善点などあればプルリクお願いします。

コメント