Electronのアプリをパッケージング

概要

Electronで作ったアプリを配布できるようにパッケージングする。

手順

ライブラリをインストール

electron-packagerをインストール

npm install electron-packager --save-dev

gulpをインストール

npm install gulp --save-dev

設定ファイルの作成

gulpfile.jsを作成

[ファイル構成例]

• /.vscode
• /node_modules
• /src
  • index.html
  • main.js
  • package.json
• package.json
• gulpfile.js ←追加

gulpfile.js

var gulp = require('gulp');
var packager = require('electron-packager');
var config = require('./package.json');

// Windows向けアプリの設定
gulp.task('packager-win', function(done) {
  packager({
    dir: './',                 // アプリ本体のフォルダ 
    out: './release',          // 出力先のフォルダ
    name: config.name,         // アプリ名
    arch: 'x64',               // 64bit
    platform: 'win32',         // Windows向け
    electronVersion: '2.0.9',  // Electronのバージョン
    overwrite: true,           // すでにフォルダがある場合は上書き
    asar: true,
    appVersion: config.version,// アプリバージョン
    appCopyright: '',     　　　// 著作権
  });
});

// Mac向けアプリの設定
gulp.task('packager-mac', function(done) {
  packager({
    dir: './',                 // アプリ本体のフォルダ 
    out: './release',          // 出力先のフォルダ
    name: config.name,         // アプリ名
    arch: 'x64',               // 64bit
    platform: 'darwin',        // Mac向け
    electronVersion: '2.0.9',  // Electronのバージョン
    overwrite: true,           // すでにフォルダがある場合は上書き
    asar: true,
    appVersion: config.version,// アプリバージョン
    appCopyright: '',     　　　// 著作権
  });
});

パッケージング

Windows向け

Windows環境で実行する

./node_modules/.bin/gulp packager-win

• release/sample-win32-x64の中にsample.exeがあるのでそれを実行するとアプリが起動する
• sample-win32-x64ごと配布すれば、他の環境でも動かすことができる

Mac向け

MacOS上で実行する

./node_modules/.bin/gulp packager-mac

release/sample-darwin-x64の中にsampleがあるのでそれを実行するとアプリが起動する

[ファイル構成例]

• /.vscode
• /node_modules
• /src
  • index.html
  • main.js
  • package.json
• release
  • sample-win32-x64 // ←Windows向けの時
  • sample-darwin-x64 // ←Mac向けの時
• package.json
• gulpfile.js

エラー

Windows

その1　パッケージ後のsample.exeを起動したら「Cannot find module」エラー

index.jsが無いといわれた場合

一番外階層のpackage.jsonの"main"がindex.jsになっていないか確認する
(npm init をすると、デフォルトではindex.jsになる)

ここを./src/main.jsに変更

・・・
  "description": "",
  "main": "index.js", // ← ここを
  "scripts": {
・・・

↓

・・・
  "description": "",
  "main": "./src/main.js", // ← 変更する
  "scripts": {
・・・

その2 ./node_modules/.bin/gulp packager-winを実行したら「Error: EBUSY: resource busy or locked~~」

• アプリのプロセスが残っているのが原因。
• タスクマネージャを起動して、詳細タブから該当のプロセス（例：sample.exe）のタスクを終了する