Electron – チュートリアルその8 electron-builder を使用してパッケージ化する

概要

これまでは electron コマンドを使用して、Electron アプリを起動してきました。今回は、Electron がインストールされていない環境でも Electron アプリを実行できるように、electron-builder を使用して、バイナリ化する方法について解説します。

本記事で紹介するコードの全体は、以下を参照ください。

electron-examples/08_electron-use-electron-builder

手順

1. `electron-builder` をインストールする

Electron アプリをバイナリ化する electron-builder をインストールします。

npm install -D electron-builder

2. `package.json` を編集する

npm run build でビルドできるように、"build": "tsc -p . && electron-builder" を追記します。このコマンドを実行すると、まず Typescript のファイルをコンパイルし、./build 以下に結果が出力されます。これらのファイルを electron-builder コマンドでビルドします。

electron-builder のビルド設定は、build フィールドに記述します。ビルド対象のファイルを files フィールドに指定します。今回は tsc -p . により生成される ./build 以下のファイルを指定します。

"build": {
  "files": [
    "build/**/*",
    "index.html"
  ]
},

3. ビルドする

ビルドを実行します。

npm run build

ビルドに成功すると、./dist 以下にパッケージ化されたバイナリが生成されます。今回は Windows 上でビルドしたため、以下のようになっています。

electron-example Setup 1.0.0.exe: アプリのインストーラー。インストールして実行する場合はこちらを使用する。
win-unpacked: インストール不要のポータブルアプリとして実行する場合はこちらを使用する

├── dist
|  ├── builder-debug.yml
|  ├── builder-effective-config.yaml
|  ├── electron-example Setup 1.0.0.exe
|  ├── electron-example Setup 1.0.0.exe.blockmap
|  └── win-unpacked
├── index.html
├── main.ts
├── node_modules
├── package-lock.json
├── package.json
└── tsconfig.json

アイコンを設定する

アイコンに使用するファイルを用意して、./assets 以下に配置します。

├── assets
|  └── sample.ico
├── index.html
├── main.ts
├── node_modules
├── package-lock.json
├── package.json
└── tsconfig.json

アイコンの設定情報を package.json の build フィールドに追加します。アイコン設定は OS ごとに設定します。

"build": {
  "files": [
    "build/**/*"
  ],
  "win": {
    "icon": "./assets/sample.ico"
  },
  "mac": {
    "icon": "./assets/sample.ico"
  },
  "linux": {
    "icon": "./assets/sample.ico"
  }
},

Windows において、すでにビルドしてあり、後からアイコンを変更した場合、エクスプローラーのキャッシュにより、アイコンが見かけ上変更されない場合があります。その場合でも、アプリを起動してアイコンが指定したものになっている場合は、正しく設定されています。キャッシュは Windows を再起動すると、削除されます。