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)のタスクを終了する
Author And Source
この問題について(Electronのアプリをパッケージング), 我々は、より多くの情報をここで見つけました https://qiita.com/H-A-L/items/1387b76bfc9abf1d8d07著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .