本文主要介紹Electron應(yīng)用如何打包成msi和exe文件。
由于介紹Electron打包成msi和exe的文章很少，官方的文檔也一筆帶過，在研究的過程中踩了很多坑，所以寫下此文，給其他人一個(gè)參考。
關(guān)于Electron基礎(chǔ)知識(shí)的文章，官方文檔很詳細(xì)，在此不再贅述，還沒入門的童鞋可以看看方的入門文檔:
https://github.com/electron/electron/blob/master/docs-translations/zh-CN/tutorial/quick-start.md

照著本文操作前，請(qǐng)確保電腦上已經(jīng)安裝了NodeJs,Electron模塊,然后有一個(gè)寫好的Electron應(yīng)用。

未打包前的文件目錄

1. 打包成運(yùn)行包

沒打包之前，想要用Electron運(yùn)行你的應(yīng)用有兩種方式

• 在應(yīng)用目錄打開命令行，輸入electron .
• 在命令行輸入electron,啟動(dòng)一個(gè)Electron窗口，并把mian.js拖入窗口中。

這種方式不太優(yōu)雅，我想直接雙擊就能運(yùn)行呢？那就要用到常規(guī)打包(以下步驟都是在應(yīng)用根目錄,即上圖的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：應(yīng)用目錄;
name of project：應(yīng)用名稱;
platform：要打包的平臺(tái);
architecture：x86 or x64架構(gòu);
electron version：electron 版本(不是應(yīng)用版本);
optional options：其它選項(xiàng);

1.3 執(zhí)行npm run-script package開始打包,第一次打包會(huì)下載相應(yīng)平臺(tái)的包,可能會(huì)比較久
打包完畢后，會(huì)多出來一個(gè)目錄,比如我的是zhihu,打開之后，會(huì)有一個(gè)zhihu-win32-x64目錄，里面就是打包生成的各種文件:

常規(guī)打包生成的文件

zhihu.exe是可以直接雙擊運(yùn)行的，resources里是源文件。
注意,node_modules不會(huì)被打包進(jìn)去，如果有依賴，記得進(jìn)入resources/app目錄輸入npm install安裝一下依賴。

2. 打包成安裝包

Electron官方推薦使用grunt-electron-installer模塊自動(dòng)生成 Windows 安裝向?qū)А?br> 注意：以下操作都在zhihu-win32-x64的父級(jí)目錄中

2.1 安裝grunt-electron-installer
新建package.json文件

新建package.json

package.json的內(nèi)容可以簡(jiǎn)單寫下:

{
  "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
因?yàn)橐玫絞runt執(zhí)行打包任務(wù)，所以，新建一個(gè)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']);

配置說明：

2.3 grunt打包
在命令行輸入npm grunt,就會(huì)執(zhí)行自動(dòng)構(gòu)建安裝程序。在構(gòu)建完之后的installer目錄(或者你配置的輸出目錄)中會(huì)有如下幾個(gè)文件

生成的安裝文件

卸載列表里

2.4 生成快捷方式
到此處，Electron的安裝文件就打包好了，但是裝完之后，沒有自動(dòng)生成快捷方式，所以，我們要在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;
}

運(yùn)行步驟1.3和2.3重新打包,此時(shí)，再次運(yùn)行setup.exe進(jìn)行安裝，就會(huì)自動(dòng)再桌面和開始菜單生成快捷方式了。但是，你可能會(huì)發(fā)現(xiàn)快捷方式的名字是Electron而不是你設(shè)置的應(yīng)用名。如果比較處女座，可以繼續(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"
  },

然后重新運(yùn)行步驟1.3和2.3進(jìn)行打包，此時(shí)再編譯好的安裝包就可以運(yùn)行并生成桌面快捷方式和開始菜單了。

運(yùn)行截圖

運(yùn)行

卸載

項(xiàng)目的配置文件和代碼源文件已上傳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