本文主要介紹Electron應用如何打包成msi和exe文件。
由于介紹Electron打包成msi和exe的文章很少，官方的文檔也一筆帶過，在研究的過程中踩了很多坑，所以寫下此文，給其他人一個參考。
關于Electron基礎知識的文章，官方文檔很詳細，在此不再贅述，還沒入門的童鞋可以看看方的入門文檔:
https://github.com/electron/electron/blob/master/docs-translations/zh-CN/tutorial/quick-start.md
照著本文操作前，請確保電腦上已經安裝了NodeJs,Electron模塊,然后有一個寫好的Electron應用。
1. 打包成運行包
沒打包之前，想要用Electron運行你的應用有兩種方式
- 在應用目錄打開命令行，輸入
electron . - 在命令行輸入
electron,啟動一個Electron窗口，并把mian.js拖入窗口中。
這種方式不太優雅，我想直接雙擊就能運行呢？那就要用到常規打包(以下步驟都是在應用根目錄,即上圖的Electron_Zhihu下)：
1.1 安裝依賴
常規打包需要用到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"
}
參數說明
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 執行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執行打包任務，所以，新建一個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簽名工具的參數，如果軟件不簽名，可以忽略這個 |
| iconUrl | No | 應用圖標鏈接，默認是Atom的圖標. |
| setupIcon | No | Setup.exe 的icon |
| noMsi | No | 是否創建.msi安裝文件? |
| remoteReleases | No | 更新鏈接，如果填寫，當鏈接中有新版本，會自動下載安裝。 |
2.3 grunt打包
在命令行輸入npm grunt,就會執行自動構建安裝程序。在構建完之后的installer目錄(或者你配置的輸出目錄)中會有如下幾個文件
運行setup.exe就開始自動安裝了,我們去'控制面板->程序和功能'里檢驗一下,發現應用已經安裝了。
2.4 生成快捷方式
到此處，Electron的安裝文件就打包好了，但是裝完之后，沒有自動生成快捷方式，所以，我們要在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();
});
}
// 卸載
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進行安裝，就會自動再桌面和開始菜單生成快捷方式了。但是，你可能會發現快捷方式的名字是Electron而不是你設置的應用名。如果比較處女座，可以繼續執行一下步驟：
2.5. 修改打包參數
修改步驟1.2中的打包參數，添加：--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
