本文主要介紹Electron應用如何打包成msi和exe文件。
由于介紹Electron打包成msi和exe的文章很少瘩扼，官方的文檔也一筆帶過炉奴，在研究的過程中踩了很多坑，所以寫下此文宵晚，給其他人一個參考。
關于Electron基礎知識的文章维雇，官方文檔很詳細淤刃，在此不再贅述，還沒入門的童鞋可以看看方的入門文檔:
https://github.com/electron/electron/blob/master/docs-translations/zh-CN/tutorial/quick-start.md
照著本文操作前吱型，請確保電腦上已經(jīng)安裝了NodeJs,Electron模塊,然后有一個寫好的Electron應用逸贾。
1. 打包成運行包
沒打包之前，想要用Electron運行你的應用有兩種方式
- 在應用目錄打開命令行津滞，輸入
electron . - 在命令行輸入
electron,啟動一個Electron窗口铝侵，并把mian.js拖入窗口中。
這種方式不太優(yōu)雅触徐，我想直接雙擊就能運行呢哟沫？那就要用到常規(guī)打包(以下步驟都是在應用根目錄,即上圖的Electron_Zhihu下)：
1.1 安裝依賴
常規(guī)打包需要用到electron-packager模塊，所以先在命令行中輸入npm install --save-dev electron-packager安裝锌介。
1.2 package.json里添加一條打包命令嗜诀，免得每次打包都要輸入一長串命令
"scripts": {
"package": "electron-packager ./ zhihu --win --out zhihu --arch=x64 --version 1.3.4 --overwrite --ignore=node_modules"
}
參數(shù)說明
electron-packager <location of project> <name of project> <platform> <architecture> <electron version> <optional options>
location of project：應用目錄;
name of project：應用名稱;
platform：要打包的平臺;
architecture：x86 or x64架構;
electron version：electron 版本(不是應用版本);
optional options：其它選項;
1.3 執(zhí)行npm run-script package開始打包,第一次打包會下載相應平臺的包,可能會比較久
打包完畢后，會多出來一個目錄,比如我的是zhihu,打開之后孔祸，會有一個zhihu-win32-x64目錄隆敢，里面就是打包生成的各種文件:
zhihu.exe是可以直接雙擊運行的，resources里是源文件崔慧。
注意,node_modules不會被打包進去拂蝎，如果有依賴，記得進入resources/app目錄輸入npm install安裝一下依賴惶室。
2. 打包成安裝包
Electron官方推薦使用grunt-electron-installer模塊自動生成 Windows 安裝向導温自。
注意：以下操作都在zhihu-win32-x64的父級目錄中
2.1 安裝grunt-electron-installer
新建package.json文件
package.json的內容可以簡單寫下:
{
"name": "zhihu",
"version": "1.0.0"
}
打開命令行玄货，輸入npm install grunt-electron-installer --save-dev安裝grunt-electron-installer模塊,接著輸入npm install grunt --save-dev安裝grunt。
2.2 配置Gruntfile.js
因為要用到grunt執(zhí)行打包任務悼泌，所以松捉，新建一個Gruntfile.js文件，并配置gurnt.config,我的配置如下：
var grunt = require("grunt");
grunt.config.init({
pkg: grunt.file.readJSON('package.json'),
'create-windows-installer': {
x64: {
appDirectory: './zhihu-win32-x64',
authors: 'yohnz.',
exe: 'zhihu.exe',
description:"zhihu",
}
}
})
grunt.loadNpmTasks('grunt-electron-installer');
grunt.registerTask('default', ['create-windows-installer']);
配置說明：
| Config Name | Required | Description |
|---|---|---|
| appDirectory | Yes | Electron App 的目錄 |
| outputDirectory | No | 輸出exe的目錄. 默認生成在installer目錄. |
| loadingGif | No | 安裝過程中的加載動畫圖片. |
| authors | Yes | 作者,若未指明馆里，則從應用的package.json文件中讀取 |
| owners | No | 應用擁有者隘世，若未定義則與作者相同. |
| exe | No | 應用的入口exe名稱. |
| description | No | 應用描述 |
| version | No | 應用版本號. |
| title | No | 應用的標題. |
| certificateFile | No | 證書文件 |
| certificatePassword | No | 加密密鑰 |
| signWithParams | No | 傳遞給signtool簽名工具的參數(shù)，如果軟件不簽名鸠踪，可以忽略這個 |
| iconUrl | No | 應用圖標鏈接丙者，默認是Atom的圖標. |
| setupIcon | No | Setup.exe 的icon |
| noMsi | No | 是否創(chuàng)建.msi安裝文件? |
| remoteReleases | No | 更新鏈接，如果填寫营密，當鏈接中有新版本械媒，會自動下載安裝。 |
2.3 grunt打包
在命令行輸入npm grunt,就會執(zhí)行自動構建安裝程序评汰。在構建完之后的installer目錄(或者你配置的輸出目錄)中會有如下幾個文件
運行setup.exe就開始自動安裝了,我們去'控制面板->程序和功能'里檢驗一下,發(fā)現(xiàn)應用已經(jīng)安裝了纷捞。
2.4 生成快捷方式
到此處，Electron的安裝文件就打包好了键俱，但是裝完之后，沒有自動生成快捷方式世分，所以编振，我們要在main.js里加入生成快捷方式的功能。
- 添加監(jiān)聽并生成快捷方式
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();
});
}
// 卸載
function uninstall() {
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, ["--removeShortcut", target], { detached: true });
child.on('close', function(code) {
app.quit();
});
}
};
if (handleStartupEvent()) {
return;
}
運行步驟1.3和2.3重新打包,此時臭埋，再次運行setup.exe進行安裝踪央，就會自動再桌面和開始菜單生成快捷方式了。但是瓢阴，你可能會發(fā)現(xiàn)快捷方式的名字是Electron而不是你設置的應用名畅蹂。如果比較處女座，可以繼續(xù)執(zhí)行一下步驟：
2.5. 修改打包參數(shù)
修改步驟1.2中的打包參數(shù)荣恐，添加：--version-string.CompanyName=zhihu --version-string.ProductName=zhihu
完整命令如下：
"scripts": {
"package": "electron-packager ./ zhihu --win --out zhihu --arch=x64 --version 1.3.4 --overwrite --ignore=node_modules --version-string.CompanyName=zhihu --version-string.ProductName=zhihu"
},
然后重新運行步驟1.3和2.3進行打包液斜，此時再編譯好的安裝包就可以運行并生成桌面快捷方式和開始菜單了。
運行截圖
項目的配置文件和代碼源文件已上傳github叠穆，歡迎star：https://github.com/yohnz/Electron-build-tutorial
參考資料：
https://github.com/electron/grunt-electron-installer
https://github.com/electron/electron/blob/master/docs-translations/zh-CN/api/auto-updater.md
http://blog.csdn.net/w342916053/article/details/51701722
