Electronを使用したアプリのビルドおよび出力方法

2022年11月25日

electronでアプリを出力する時の方法です。

$ npx electron-builder

ターミナルでelectron-builderコマンドを使用します。
以下のオプションを付けることで出力ファイルを変更することができます。

オプション	説明	作成されるファイル
--mac --x64	macOS (x64) 用インストーラー	AppName-0.0.1.dmg
--mac --x64 --dir	macOS (x64) 用ポータブルパッケージ	AppName.app
--win --x64	Windows (x64) 用インストーラー	AppName Setup 0.0.1.exe
--win --x64 --dir	Windows (x64) 用ポータブルパッケージ	AppName.exe + 依存DLLなど

$ npx electron-builder --mac --x64 --dir

このようにするとmacOS用の.appを出力することができます。

出力先などの細かい設定はpackage.jsonで管理されています。

アプリの出力先を変更したい場合

"directories": {
      "output": "build"
    }

build内にdirectoriesを設定すると変更できます。

  "build": {
    "appId": "com.~~~.~~~~",
    "directories": {
      "output": "build"
    }
  }

アプリアイコンの変更

mac": {
      "icon": "icons/icon.icns"
    }

macの場合このようにiconsフォルダを作成してその中にiconを追加します。

"build": {
    "appId": "com.~~~.~~~",
    "directories": {
      "output": "build"
    },
     "mac": {
      "icon": "icons/icon.icns"
    }
  }