[Electron學習筆記]Electron安裝檔打包攻略－Michael_Jheng的部落格

在[Electron學習筆記]Electron專案建立有講解如何將Electron打包成執行檔,下一步就是要Electron執行檔打包成安裝檔,在這過程每一個步驟都非常重要,所以會完整講解

#Step One: 到Electron GitHub載點下載Electron程式集,下載完成解完壓縮後,開啟Visual Studio Code這軟體來安裝並執行Electron,

Visual Studio Code官方網站

在終端機依次輸入

cd electron-quick-start

npm install && npm start

顯示結果如下,

#Step Two: 在Visual Studio Code終端機輸入

npm install electron-packager --save-dev

在electron-quick-start-master->package.json中的"devDependencies"中會多出electron-packager與版本,如下所示,

接下來需要在"scripts"增加執行electron-packager的指令,指令如下,

"build":"electron-packager . MyApp --platform=win32 --arch=x64 --version=1.7.10

--icon=icons/Mushroom.ico --asar=true --out=dist --ignore=node_modules/electron-*

--version-string.CompanyName=MyApp --version-string.ProductName=MyApp"

指令內容說明如下:

electron-packager . MyApp: 將目前全部資料打包成MyApp這個名字

--platform = darwin(Mac),win32(Windows),linux(LINUX)

--arch = ia32,x64,all

--version = Electron版本

--icon = icon路徑

--asar = true or false,設定trun是把程式文件封裝,比較不容易被看到原始碼

--out = 輸出文件名稱(dist)

--ignore = 忽略檔案不要打包,建議把electron都忽略掉,因為打包後裡面就有了,可以減少檔案大小

--version-string.CompanyName = 新增安裝檔公司名稱

--version-string.ProductName = 新增安裝檔產品名稱

#Step Three: 為了使Electron安裝檔在安裝完後,能產生捷徑讓使用者分辨操作,需在electron-quick-start-master->main.js增加以下程式,

var handleStartupEvent = function () {
if (process.platform !== 'win32') {
return false;
}

var squirrelCommand = process.argv[1];

switch (squirrelCommand) {
case '--squirrel-install':
case '--squirrel-updated':
install();
return true;
case '--squirrel-uninstall':
uninstall();
app.quit();
return true;
case '--squirrel-obsolete':
app.quit();
return true;
}

function install() {
var cp = require('child_process');
var updateDotExe = path.resolve(path.dirname(process.execPath), '..', 'update.exe');
var target = path.basename(process.execPath);
var child = cp.spawn(updateDotExe, ["--createShortcut", target], { detached: true });
child.on('close', function(code) {
app.quit();
});
}

};

if (handleStartupEvent()) {
return;
}

#Step Four: 把Step Two與Step Three完成後,就可執行

npm run build

執行後需等一段時間,就產生dist資料夾,如下所示,

進入electron-quick-start-master->dist->MyApp-win32-x64中找MyApp.exe,如下所示,

點擊後開啟結果如下,

#Step Five: 在electron-quick-start-master->dist資料夾內新增Gruntfile.js與package.json這兩隻程式,如下所示,

Gruntfile.js程式如下,

var grunt=require('grunt');

grunt.config.init({
pkg: grunt.file.readJSON('package.json'),
'create-windows-installer': {
x64:{
           /* 安裝檔版本 */
version:'1.0.0',
           /* 作者 */
authors:'MichaelJheng',
           /* 在應用程式與功能之圖示 */
           iconUrl: 'http://www.icons101.com/icon_ico/id_36436/Mushroom__1UP.ico',
           /* 執行檔位置 */
appDirectory:'./MyApp-win32-x64',
           /* 打包匯出路徑 */
outputDirectory:'./OutPut',
           /* exe名稱 */
exe:'MyApp.exe',
           /* 描述 */
description:'MyApp',
           /* 安裝檔圖示 */
setupIcon:"../icons/Mushroom.ico",
           /* 不要產生Msi檔 */
noMsi:true
}
}
});
/* 加載任務 */
grunt.loadNpmTasks('grunt-electron-installer');
/* 設置為默認 */
grunt.registerTask('default', ['create-windows-installer']);