摘要：本文主要介紹應(yīng)用如何打包成和文件。添加監(jiān)聽并生成快捷方式安裝卸載運(yùn)行步驟和重新打包此時(shí)，再次運(yùn)行進(jìn)行安裝，就會自動再桌面和開始菜單生成快捷方式了。

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

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

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

在應(yīng)用目錄打開命令行，輸入electron .

在命令行輸入electron,啟動一個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：應(yīng)用目錄;
name of project：應(yīng)用名稱;
platform：要打包的平臺;
architecture：x86 or x64架構(gòu);
electron version：electron 版本(不是應(yīng)用版本);
optional options：其它選項(xiàng);

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

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

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

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

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

{
  "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ù)，所以，新建一個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,就會執(zhí)行自動構(gòu)建安裝程序。在構(gòu)建完之后的installer目錄(或者你配置的輸出目錄)中會有如下幾個文件

運(yùn)行setup.exe就開始自動安裝了,我們?nèi)?控制面板->程序和功能"里檢驗(yàn)一下,發(fā)現(xiàn)應(yīng)用已經(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;
}

運(yùn)行步驟1.3和2.3重新打包,此時(shí)，再次運(yùn)行setup.exe進(jìn)行安裝，就會自動再桌面和開始菜單生成快捷方式了。但是，你可能會發(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)行并生成桌面快捷方式和開始菜單了。

項(xiàng)目的配置文件和代碼源文件已上傳github，歡迎star：https://github.com/yohnz/Elec...

轉(zhuǎn)載請說明來源：http://yohnz.github.io/2016/1...

參考資料：
https://github.com/electron/g...
https://github.com/electron/e...
http://blog.csdn.net/w3429160...