create-react-app × electron-packager の最小設定

2020-04-17

本当は electron-builder を入れたかったんですが、エラーが出まくって諦めました。

以下、windows 上での正常動作を確認しました。


electron-packager などをインストールする

npm i --save-dev electron-packager electron-is-dev

main.js を修正する

const { app, BrowserWindow } = require("electron"); const isDev = require("electron-is-dev"); function createWindow() { const win = new BrowserWindow({ width: 800, height: 600, webPreferences: { nodeIntegration: true, }, }); win.loadURL( isDev ? "http://localhost:3000/index.html" : `file://${__dirname}/build/index.html` ); if (isDev) { win.webContents.openDevTools(); } } app.allowRendererProcessReuse = false; app.whenReady().then(createWindow); app.on("window-all-closed", () => { if (process.platform !== "darwin") { app.quit(); } }); app.on("activate", () => { if (BrowserWindow.getAllWindows().length === 0) { createWindow(); } });

パッケージ化するときは build されたファイルを読み込むように設定するだけですね。

package.json に homepage を追加する

"homepage": "./",

ここの設定に気づかず、やたら時間を取られました…。

package.json に パッケージ用のスクリプト を追加する

"scripts": { "package": "electron-packager . hoge --platform=win32 --arch=x64 --electronVersion=8.2.3 --overwrite" },

今回は windows x64 向けの設定にしてあります。

--out=dist などのオプションを追加するのも良いですね。

electron-packager を起動する

  1. npm run build
  2. npm run package

恐らく Mac でも動くはず。

© 2018 kk-web