【JS/Electron】electron-builderでElectronアプリをビルドする
こんにちは、しきゆらです。
今回は、electron-builderというものを触ってみます。
私は、よく使うサイトをElectronアプリとして書き出して使っています。
ビルドはelectron-packagerというものを使い、時々Electronをビルドしていました。
先日久々にビルドしていると、エラーが出て動かなくなっていました。
正直、NodeやElectronについてはにわか程度の知識しかなく、更新情報なども追えているわけではありませんでした。
調べてみると、electron-builderというものもあるということで、今回はこっちの方を使ってみました。
簡単ではありますが、記録として残しておきます。
といっても、参考サイトをほぼそのままやっただけ。
参考サイトは以下です。
electron-builderでElectronアプリのビルド
準備
まずは、インストール。
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つとしてどうでしょうか。
今回はここまで。
おわり