Electron exe作成方法

スポンサードリンク

参考: 【Electron】HTML/CSS/JavaScript でデスクトップアプリを作った【インストールから exe 化まで】

スポンサードリンク

node インストール

この記事を参照: Node.jsをインストールする

node 確認: node --version

npm 確認: npm --version

プロジェクト作成

mkdir ElectronTest
cd ElectronTest
npm init

Electron インストール

npm - -D electron builder

メインプロセス

{
  "name": "electrontest",
  "version": "1.0.0",
  "description": "",
  "main": "main.js", ←デフォルトだと index.js
  (以下略)
}
const electron = require('electron');
const app = electron.app;
const BrowserWindow = electron.BrowserWindow;

let mainWindow = null;
app.on('ready', () => {
    // mainWindow を作成
    mainWindow = new BrowserWindow({width: 400, height: 400});

    // html を指定
    let path = 'file://' + __dirname + '/index.html';
    mainWindow.loadURL(path);

    // developper tool を開く
    // mainWindow.webContents.openDevTools();

    mainWindow.on('closed', function() {
        mainWindow = null;
    });
});

builder インストール

npm i -D electron-builder

build-winを記述

const builder = require('electron-builder');

builder.build({
    config: {
        'appId': 'electorn-test',
        'win':{
            'target': {
                'target': 'zip',
                'arch': [
                    'x64',
                    'ia32',
                ]
            }
        }
    }
});

build実行

node build-win

build-winでエラーが発生

package.jsonに以下を追加

"build": {
  "win": {
    "signAndEditExecutable": false
  }
}

管理者権限でキャッシュをクリア

rmdir /s /q C:\Users\"あなたの名前"\AppData\Local\electron-builder\Cache

electronのバージョン変更

"devDependencies": {
  "electron": "22.0.0"
}

macOSのパッケージングを無効

"build": {
  "win": {
    "target": "nsis"
  },
  "mac": {
    "target": []
  }
}

おまけ

アプリ名をカスタム

package.jsonのnameを変更

{
  name: "app-test"
}

アイコン追加

"scripts": {
  "start": "electron ."
  "build": "electron-packager . --icon=app.ico --overwrite"
}

コメント