手把手教你把前端代碼打包成msi和exe文件

本文主要介紹Electron應用如何打包成msi和exe文件。
因爲介紹Electron打包成msi和exe的文章不多，官方的文檔也一筆帶過，在研究的過程當中踩了不少坑，因此寫下此文，給其餘人一個參考。
關於Electron基礎知識的文章，官方文檔很詳細，在此再也不贅述，還沒入門的童鞋能夠看看方的入門文檔:
https://github.com/electron/e...

<!-- more -->
照着本文操做前，請確保電腦上已經安裝了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/Elec...

轉載請說明來源：http://yohnz.github.io/2016/1...

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