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 とするとアプリが終了する。
2.4 yarn dist と yarn dist:dir
yarn dist:dir とすると、dist/mac の下にアプリが作成された。また、yarn dist とするとこのアプリが入った dmg や zip ファイルが作成されていた。このアプリを実行すると、以下のようにアプリが実行された。
とりあえずここまで。