electron-webpackのススメ

ElectronでSPA開発をする人向け

Wed, 02 Jan 2019

新年明けましておめでとうございます。 今回は最近あまり聞かなくなってしまいました Electron の話です。 Electron 上でも、 SPA を書きたいという人向けの記事を書こうと思います。

イントロ

結構シチュエーションが限られるかも知れないが、Electron アプリを開発する際、 Vue や React といった仮想 DOM ライブラリを使いたい人はいると思います。 さらに、 Babel や TypeScript を使って、モダンな文法でアプリを書きたいという人もいると思います。

しかし、昨今のフロントエンドのエコシステムは少し複雑になっていて、ちょっと簡単なアプリを作るのにも webpack やら Babel,TypeScript の設定ファイルをたくさん書かないといけなくて少し面倒です。

上記のような課題を解決するツールとして、各ライブラリが CLI ツールを出していたり(例: React の場合は create-react-app等がある)、Parcelといった設定ファイルを一切書かないでいい感じにするもの等があります。

今回は、Electron でも似たようなものがないのかと探していたところ、electron-webpackという良さそうなものがあったので紹介します。

electron-webpack

https://webpack.electron.build/

electron-webpackの機能とメリットとしては、

  • Detailed documentation
  • Use of webpack-dev-server for development
  • HMR for both renderer and main processes
  • Use of @babel/preset-env that is automatically configured based on your electron version
  • Ability to add custom webpack loaders, plugins, etc.
  • Add-ons to support items like TypeScript, Less, EJS, etc.
  • 詳細なドキュメント
  • バンドルツールのための webpack
  • 開発のためのwebpack-dev-server
  • メインとレンダラー両プロセスの HMR(Hot Module Replacement)対応
  • @babel/preset-envと electron のバージョンに応じて自動でトランスパイルを実施
  • 独自の webpack loaders,plugins 等の組込み易さ
  • Add-ons による TypeScript,Less,EJS のサポート

とあり、何やら高機能だということがわかります。

使ってみる

まずゼロからプロジェクトを作ることを想定し、Quick Start にあるようにテンプレートを落としてくる

$ mkdir electron-webpack-playgroud && cd electron-webpack-playground
$ curl -fsSL https://github.com/electron-userland/electron-webpack-quick-start/archive/master.tar.gz | tar -xz --strip-components 1

yarn で必要なモジュールを取得

$ yarn

そしてこの後にyarn devと打つだけで、レンダラープロセスに表示する為の js がビルドされ Electron が起動する。

yarn dev を打った状態でsrc/main/*src/renderer/*のどちらかを編集し保存すると HMR が走って変更が適用される。めっちゃ楽である。



(レンダラープロセスに hogehoge と書き込んだのがすぐに反映される)

React TypeScript の導入

テンプレートでは Vue.js になっているので、React をかけるようにし、さらに TypeScript を導入してみる

まず、React を使うため yarn で追加していく

$ yarn add react react-dom

次に、electron-webpackが jsx をトランスパイルできるように@babel/preset-reactを入れる

$ yarn add -D @babel/preset-react

これだけで React を書く準備はできたのだが、TypeScript も一気にやってしまう

# このelectron-webpack-ts というのがtypescriptをかけるようにしてくれるもの
$ yarn add -D electron-webpack-ts typescript
# ついでに、reactの型定義ファイルも持ってくる
$ yarn add -D @types/react @types/react-dom

あともうひと手間だけあるのだが、TypeScript で React を書くにはelectron-wepack-ts内部の設定ファイルに少し手を加えないといけない(jsx を書くため)

具体的にはtsconfig.jsonを下記のように作るだけでいい

{
  "extends": "./node_modules/electron-webpack/tsconfig-base.json",
  "compilerOptions": {
    "jsx": "react",
    "noImplicitAny": false
  }
}

noImplicitAnyとしてるのは、面倒くさがって electron のメインプロセスで any 許容したいためです:-)

これでアプリを書く準備はできました!

src/main/index.jsの拡張子をsrc/main/index.tsという感じに変更し、src/main/index.jsを削除して、src/main/index.tsxを下記のように作ります。

import * as React from "react";
import * as ReactDOM from "react-dom";

const Header = <h1>hello electron webpack</h1>;

ReactDOM.render(Header, document.getElementById("app"));

これでyarn devするだけで、React で  書いた画面が Electron で起動します (上記のコードは GitHub にて共有してます)

今回は割愛していますが、electron-builderなどと相性がよく(というか開発元が同じ)、production ビルドもいい感じにやってくれます。

おわりに

electron-webpackを使うとプロジェクトの立ち上がりがかなり楽になるので、面倒だと感じる人にはとてもおすすめできます。

こういったブラックボックス化されたツールを使ってるとありがちな、痒いところに手が届かないみたいなことや、electron-webpack固有の事情等で辛くなっても、アプリケーションコードとは完全に疎になっている為、気軽に捨てれていいと思っています。

もし Electron でなんか作るってなったらぜひ検討してみてください

では!

SHARE

Copyright 2018-19 satoshicano