パッケージングを行う。パッケージングを行うツールは、何種類かあるみたいだけど、electron-packagerを使うことにする。

[Electron] Hello World的なもの(2) index.htmlの置き場所を変える。からダウンロードできるソースに対して行っていく。

プロジェクトのフォルダでelectron-packagerをインストールする。

npm install electron-packager -D
npm run build:prod

でビルド後、

npx electron-packager dist --overwrite

って、やると実行したOS用のパッケージングが行われる。distはビルド後作成されるフォルダで、その中のファイルをパッケージングする。

32bitのWindows上で実行すると、webpack-electron-win32-ia32フォルダに作成される。このフォルダ名とexeのファイル名のwebpack-electronは、distフォルダにあるpackage.jsonのnameに書いてあるものが使用されている。

macOS用は、

npx electron-packager dist --platform=darwin --arch=x64 --overwrite
で、

64bitのWindows用は、

npx electron-packager dist --platform=win32 --arch=x64 --overwrite

で、x64のLinux用は、

npx electron-packager dist --platform=linux --arch=x64 --overwrite

で作れる。

ただし、Windows上で作ったmacOSのファイルたちをmacOSに持って行っても動かなかったんだよねー。詳しくは調べていないんでなんで動かないのかはわからん。実行権とかなんかの問題なんかな?

Linux、macOS上でWindows用のパッケージングを行うには、Wineをインストールする必要があるようだ。(試してない)

package.jsonのscriptsに

    "package": "electron-packager dist --overwrite"

を追加しておくと、

npm run package

で、パッケージングできる。

変更したソースをダウンロードできるようにしといた。