Electron 設定編 - Elm + Electron + Webpack 覚書(1)

1. はじめに

Electron のみ、Elm のみの記事はかなり多いのだが、Webpack でデプロイするところまで書かれたものがあまりない気がする。自分の勉強のために、やったことを記録してみる。知らないことだらけなので、途中失敗したりするかもしれないが、それも記録として残しておく。

2. electron + webpack の設定

いきなり Elm に入る前に、まず electron が動く環境を作りたい。いろいろ調べたら electron と webpack の簡易設定パッケージが electron-webpack として配布されていた。まずひとまず動く環境を用意して、それを参考にして自分で運用してみる。

最初にまず、electron を global の node_modules にインストールしておく。

yarn global add electron

electron-webpack には electron-webpack-quick-start という開発を開始するためのスタートアップパッケージが準備されている。ます、ここからスタートしてみる。

2.1 事前準備

とりあえず、nodejs の管理をするために yarn だけは使えるようにしておく。macOS であれば、以下のコマンドでインストールできる。まだ入っていなければ、nodejs なども自動的にインストールされる。

brew install yarn

2.2 electron-webpack-quick-start のクローン

とりあえず、quick start をクローンして動作を確認してみる。

git clone https://github.com/electron-userland/electron-webpack-quick-start.git

このフォルダの中に入る。

cd electron-webpack-quick-start

yarn を実行して、node package をインストールする。

yarn

package.json を確認すると、以下の script が定義されている。

  "scripts": {
    "dev": "electron-webpack dev",
    "compile": "electron-webpack",
    "dist": "yarn compile && electron-builder",
    "dist:dir": "yarn dist --dir -c.compression=store -c.mac.identity=null"
  },

このことから、以下のコマンドが存在していることがわかる。

  • yarn dev → Electron の開発環境を起動
  • yarn compile → electron-webpack でソースコードをコンパイルし、webpack 出力を作成
  • yarn dist → yarn compile 後に electron-builder を実施(配布パッケージを作成)
  • yarn dist:dir → パックされていないパッケージを作成

2.3 yarn dev

ひとまず yarn dev を実行してみる。左側に Electron の実行画面、右側に Chromium のデバックモード画面が表示される。開発中はこれでアプリのデバッグが可能となる。現状では赤ボタンを押してウインドウを閉じても、アプリは終了しなかった。macOS のアプリと同様に Command-Q とするとアプリが終了する。

f:id:hkob:20200523140350p:plain
yarn dev の結果

2.4 yarn dist と yarn dist:dir

yarn dist:dir とすると、dist/mac の下にアプリが作成された。また、yarn dist とするとこのアプリが入った dmg や zip ファイルが作成されていた。このアプリを実行すると、以下のようにアプリが実行された。

f:id:hkob:20200523142033p:plain
electron-webpack-quick-start.app の実行結果

とりあえずここまで。