まくろぐ

Electron アプリの配布パッケージを作る (electron-builder)

更新:
作成:

概要

electron-builder を使用すると、Electron アプリを Windows、macOS、Linux 用の配布用バイナリとしてパッケージングすることができます。 各 OS 用のインストーラはもちろん、ポータブルな zip パッケージを作成することもできます。

公式サイトのドメイン名が electron.build っていうのがかっこいいですね。

electron-builder のインストール

Node.js のパッケージ管理ツールとして、npm よりも yarn を使うことが strongly recommended されているので、まず yarn をインストールしてから yarnelectron-builder をインストールすることにします。

$ npm install -g yarn
$ yarn add electron-builder --dev

下記のように実行して、ヘルプを表示できればインストール完了です。

$ npx electron-builder --help

ビルド設定

electron-builder 用の設定は、package.jsonbuild プロパティで行うことができます。 ポイントは、files の指定で、パッケージングする html ファイルや js ファイル、画像ファイルなどをすべてカバーするように指定しておく必要があります。

package.json
{
  "name": "myapp",
  "version": "0.0.1",
  "main": "build/main.js",
  "scripts": {
    "start": "tsc && electron ."
  },
  "build": {
    "appId": "com.example.myapp",
    "productName": "MyApp",
    "files": [
      "build/**/*",
      "public/**/*"
    ]
  },
  "devDependencies": {
    "@types/node": "^14.0.14",
    "electron": "^9.0.5",
    "electron-builder": "^22.7.0",
    "typescript": "^3.9.5"
  }
}

パッケージの作成

上記のビルド設定に従ってパッケージを作成するには、electron-builder コマンドを使用します。 各種オプションにより、どの OS 用のパッケージを作成するかを指定することができます。 オプションは npx electron-builder --help で確認できますが、次のようにオプションを組み合わせてパッケージを作成できます。

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

ここでは、macOS のポータブルパッケージ (MyApp.app) を作成してみます。 ポータブルパッケージは、いわゆるインストーラーではなく、ディレクトリごとコピーすればそのまま実行できる形態のものです。

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

デフォルトで、dist ディレクトリ以下に実行ファイルが作成されるので、例えば、macOS では次のようにアプリを起動することができます(Finder から MyApp.app アイコンをダブルクリックしても起動できます)。

$ open dist/mac/MyApp.app

macOS 環境で Windows 用のパッケージを作成することもできます。 その場合は、自動的に wine がダウンロードされてビルドが実行されます。

一方、Windows 環境で macOS 用のパッケージを作成することはできないようです。 Apple イケてないですね。

応用

.gitignore の修正

.gitignore ファイルには、パッケージの出力ディレクトリである dist/ を追加しておきましょう。

package.json へスクリプト追加

package.json に次のようにスクリプト定義しておけば、npm run build:mac コマンド(あるいは yarn run build:mac)で簡単に配布用パッケージを作成できるようになります。

package.json
{
  "name": "myapp",
  "version": "0.0.1",
  "main": "build/main.js",
  "scripts": {
    "start": "tsc && electron .",
    "build:mac": "electron-builder --mac --x64",
    "build:win": "electron-builder --win --x64"
  },
  // ...
}

関連記事

まくろぐ
サイトマップまくへのメッセージ