【JS/Electron】electron-builderでElectronアプリをビルドする

こんにちは、しきゆらです。

今回は、electron-builderというものを触ってみます。

 

私は、よく使うサイトをElectronアプリとして書き出して使っています。

ビルドはelectron-packagerというものを使い、時々Electronをビルドしていました。

先日久々にビルドしていると、エラーが出て動かなくなっていました。

正直、NodeやElectronについてはにわか程度の知識しかなく、更新情報なども追えているわけではありませんでした。

調べてみると、electron-builderというものもあるということで、今回はこっちの方を使ってみました。

 

簡単ではありますが、記録として残しておきます。

といっても、参考サイトをほぼそのままやっただけ。

参考サイトは以下です。

electron-builderでElectronアプリのビルド

https://qiita.com/nanairo24/items/73356574b0dc65c0e617

 


 

準備

まずは、インストール。

npm install electron-builder

インストールはこれで終わり。

しかし、これでは使えませんでした。

 

結果としては、devDependenciesとして追加しないといけないようです。

Unhandled rejection Error: Package "electron" is only allowed in "devDependencies". Please remove it from the "dependencies" section in your package.json.

というエラーが出て実行できませんでした。

electron-builderはdevDependenciesに追記しましょう。

次は、ビルド用のスクリプトを作成します。

今回は、参考サイトをそのまま利用しました。

感謝です。

 

以下のコードは、Mac用のコードです。

今回は、build-mac.jsとして保存しました。

Win用は、platformの部分やconfig内のmacをwinに書き換えると良さそう。

未検証。

'use strict';

const builder = require('electron-builder');
const fs = require('fs');
const packagejson = JSON.parse(fs.readFileSync('./package.json', 'utf8'));
 
builder.build({
    platform: 'mac',
    config: {
      'appId': `${packagejson.name}`,
      'mac': {
      'target': 'zip',
    },
  },
})

 

あとは、以下のコマンドを実行。

といっても、先ほどのスクリプトをnodeで実行しているだけですね。

node build-mac

 

シンプルなアプリであれば簡単にビルドできるので簡単ですね。

electron-packagerでは、全てコマンドオプションとして記述しなければいけませんでした。(スクリプトにできるのかはわかりませんが・・・)

electron-builderでは、スクリプトとして書くようになっているため、コードを実行するだけ。

とても手軽で便利。

また、アプリの名前やアイコン等もpackage.jsonやファイル名から勝手に取得してくれるので、こちらから指定することもありません。

これは便利。

 

まとめ

というわけで、簡単ではありますがelectron-builderというものを触ってみました。

普段あまり使うものでもないので、スクリプトを実行するだけなのはとても手軽で便利でした。

electron-packagerとの違いや使いやすさの比較などはあまりできませんが、選択肢の1つとしてどうでしょうか。

 

今回はここまで。

おわり