パッケージングする
開発モードで動かしているだけではわからないこともありますし、配布するためには配布可能な状態にパッケージングする必要があります。
electron-builderというツールを使えば、とても簡単に配布可能なファイルが生成できます。
package.jsonに設定を追加する
electron-builderでElectronアプリをパッケージングする際は、package.jsonにいくつもの情報を入れる必要がありますが、作者名や説明文などは省略しようと思えば可能です。どうしても設定しなければいけないものは"homepage": "."だけです。パッケージング時に必要になる情報なため、これがないとelectron-builderの動作が完了してもパッケージングされたアプリが正しく動作しません。
"homepage": ".",
"main": "public/electron.js",
"scripts": {
"dev": "electron .",
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"pack-app": "npm run build && electron-builder --dir",
"dist": "npm run build && electron-builder"
},
homepageと、scriptsのpack-appおよびdistを追加しています。
pack-appおよびdistでは、electron-builderを実行する前に、npm run buildを実行してReactのビルド（バンドル）を行っています。いわゆる普通のWebアプリを作成した上で、Electron用にパッケージングを行うのです。
このときbuild/ディレクトリには、Reactのビルド時に生成したファイルが出力され、dist/ディレクトリには、electron-builderが生成したファイルが出力されます。もし、パッケージングで困ったときは、build/やdist/を消してからやり直すとうまくいくこともあります。
その後、npm run pack-appを実行すると、dist/<OS>/<アプリ名>でアプリがパッケージングされます。macOSで実行した場合は、dist/mac/wijmo-example1.appになり、Windowsならdist/win-unpacked/wijmo-example1.exeとなります。
npm run pack-app
# Macの場合 # open コマンドで実行可能 open dist/mac/wijmo-example1.app
# Windowsの場合 .\dist\win-unpacked\wijmo-example1.exe
パッケージングが正しくできているか、動作確認をしておくといいでしょう。以下はWindowsでnpm run pack-appしたときのログです。
> wijmo-example1@0.1.0 build ...\wijmo-example1 > react-scripts build Creating an optimized production build... Compiled successfully. File sizes after gzip: 222.14 KB build\static\js\2.4c3d1fdd.chunk.js 12.18 KB build\static\css\2.42521bd4.chunk.css 1.4 KB build\static\js\3.433c6905.chunk.js 1.18 KB build\static\js\nuntime-main.6198875f.js 834 B build\static\js\main.ca9ed471.chunk.js 278 B build\static\css\main.6dea0f05.chunk.css The project was built assuming it is hosted at ./. You can control this with the homepage field in your package.json. The build folder is ready to be deployed. Find out more about deployment here: https://cra.link/deployment • electron-builder version=22.9.1 os=10.0.19041 • loaded parent configuration preset=react-cra • description is missed in the package.json appPackageFile=...\wijmo-example1\package.json • author is missed in the package.json appPackageFile=...\wijmo-example1\package.json • writing effective config file=dist\builder-effective-config.yaml • packaging platform=win32 arch=x64 electron=11.1.0 appOutDir=dist\win-unpacked • downloading url=https://github.com/electron/electron/releases/download/v11.1.0/electron-v11.1.0-win32-x64.zip size=78 MB parts=8 • downloaded url=https://github.com/electron/electron/releases/download/v11.1.0/electron-v11.1.0-win32-x64.zip duration=40.874s • default Electron icon is used reason=application icon is not set
pack-appではなくdistの場合は、配布用のパッケージ（インストーラやZipファイル）が作成されます。
npm run dist
macOSならdist/wijmo-exampe1-0.1.0-mac.zipやdist/wijmo-example1-0.1.0.dmg、Windowsならdist\wijmo-example1 Setup 0.1.0.exeなどが作成されます。
実際に配布する際には
Electronはクロスプラットフォームなフレームワークであり、electron-builderもがんばればmacOS、Windows、Linuxアプリを1つの環境でパッケージング可能です。しかし、そのためにはいろいろとインストールしなければいけないものや、指定しなければいけないコマンドラインオプションがあります。
実際に配布するときにはpackage.jsonにauthorやdescriptionなどの情報、開発者署名、アイコンなどを指定する必要があるでしょう。
紙面の限りもあり、それらすべてを説明することはできませんが、Electron公式とelectron-builder公式を一通り読めば、必要な情報は得られるはずです。
まとめ
冒頭でお伝えした通り、年々JavaScript開発は大規模・高度化しているため、静的型が使えるTypeScriptが人気です。Electron＋Wijmoの開発においてもTypeScriptを活用すれば、より安全に開発ができるでしょう。
IPCを使えば、レンダラープロセス（Webブラウザ）ではできないことをメインプロセスに任せることができます。また、electron-builderを使えば、配布可能なパッケージを作成可能です。ぜひチャレンジしてみてください。
