Electronプロジェクトのビルド

Posted

js_ts

Electronプロジェクトのビルド

Electronのビルドについて。

Electronでは開発時に必要になるelectronパッケージにはビルダーが含まれていない。electronとは別にelectron-builder等のビルダーを利用する必要がある(“等の"と書いたが基本的にelectron-builderを使うと思って良し)。

electron-builder

https://github.com/electron-userland/electron-builder

https://www.electron.build/

インストール

これを書いている時点でパッケージマネージャはyarnを推奨しているようだが、npmでもインストール出来る。

$ npm install -D electron-builder

$ yarn add electron-builder --dev

使い方(CLI)

設定ファイル等の書き方は置いておいて、こういったツールはCLIコマンドが基礎にありその入力を毎回するのを避けるために設定ファイルが存在することが多い。

つまり、設定ファイルの書き方云々の前にCLIコマンドを打って、その後にそれらを設定ファイルで書くとどうなるのかを調べていくのが個人的に良いと思っている。

1.ビルド可能な簡単なelectronアプリを用意

https://www.electronjs.org/docs/tutorial/first-app

electronのtutorial辺りを見て適当なアプリを用意する

2.ビルドする

https://www.electron.build/cli#targetconfiguration

上記urlにビルド時のオプションが書かれている。package.jsonをルートディレクトリにして、以下のコマンドを打つ。

// for Linux
$ npx electron-bilder build --linux (短縮は -l)

// for Mac
$ npx electron-bilder build --mac (短縮は -m)

// for Windows
$ npx electron-bilder build --widnows (短縮は -w, --win)

// for Linux,Mac,Windows
$ npx electron-bilder build -lmw

これだけで、デフォルト設定時のそれぞれのOSで動くネイティブアプリが dist ディレクトリ下に生まれる。

中を覗いてみると、例えばlinuxの場合は配布形式としてsnap,AppImageに加えてパッケージ化されていないネイティブアプリ(配布時には好きな形式で圧縮すれば良い)が生成される。

基本的な使い方はこれだけで、後は不要な配布形式の製品の生成などを行わないように、オプションを加えていく。

3.設定

electron-builderでは2通りの設定の渡し方がある

  1. package.jsonにbuilderプロパティを作ってそこに書く
  2. --configオプションで指定したファイル(デフォルトではelectron-builder.yml)に書く(jsonなども可)

1の方法で紹介されていることが多いが、別にしたければ別にしても全く問題ない。以下はpackage.jsonにbuildプロパティを作った場合。

{
  "name": "my_first_app",
  "version": "<<書かれていることを確認>>",
  "description": "<<書かれていることを確認>>",
  "main": "js/main/main.js",
  "scripts": {
    "start": "electron .",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "<<書かれていることを確認>>",
  
  "build": {
    // ここに設定を書く
  }, 
  
  "license": "ISC",
  "devDependencies": {
    "electron": "^8.0.2",
    "electron-builder": "^22.3.2"
  }
}

https://www.electron.build/configuration/configuration#configuration

設定の書くオプション、詳しい書き方は上記のurlを参照すること。

基本的な書き方そしては、

である。

共通の設定

共通の設定としてあるのが以下の4つ

appIdはMacのアプリケーションにおけるCFBundleIdentifierに使われたり、WindowsのパッケージであるNSISにおけるApplication User Model IDに使われたりする。

directoriesはoutputでビルドした製品の出力先ディレクトリの指定(デフォルトはdist)、appでアプリケーションのディレクトリ、通常はpackage.jsonが置かれているディレクトリの指定(デフォルトは作業中のディレクトリまたはapp, www)が出来る。

以下はdirectoriesを指定した場合

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

各パッケージの設定

ビルド時にnpx electron-bilder build --linuxと打った場合、snap,AppImageと未パッケージのディレクトリが生成されるが、AppImageしか必要が無かった場合、以下のように書くと良い。

"linux": {
  "target": [
    {
      "target": "AppImage"
    }
  ],
  "maintainer": "taro yamada",
  "description": "this is my first app"
}

maintainerとdescriptionも指定してあるが、それは必要に応じて。詳しくは以下のurlを参照。

https://www.electron.build/configuration/linux

使い方(Programmatic)

設定を動的にしたい、カスタムのコマンドで引数を取って色々とやりたい場合、jsでプログラムを書いてビルドすることも可能。