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

本文主要介紹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目錄隆敢,里面就是打包生成的各種文件:

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

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

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

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末少漆,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子硼被,更是在濱河造成了極大的恐慌示损,老刑警劉巖,帶你破解...
    沈念sama閱讀 216,843評論 6 502
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件嚷硫,死亡現(xiàn)場離奇詭異检访,居然都是意外死亡始鱼,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,538評論 3 392
  • 文/潘曉璐 我一進店門脆贵,熙熙樓的掌柜王于貴愁眉苦臉地迎上來医清,“玉大人,你說我怎么就攤上這事丹禀∽辞冢” “怎么了?”我有些...
    開封第一講書人閱讀 163,187評論 0 353
  • 文/不壞的土叔 我叫張陵双泪,是天一觀的道長持搜。 經(jīng)常有香客問我,道長焙矛,這世上最難降的妖魔是什么葫盼? 我笑而不...
    開封第一講書人閱讀 58,264評論 1 292
  • 正文 為了忘掉前任,我火速辦了婚禮村斟,結果婚禮上贫导,老公的妹妹穿的比我還像新娘。我一直安慰自己蟆盹,他們只是感情好孩灯,可當我...
    茶點故事閱讀 67,289評論 6 390
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著逾滥,像睡著了一般峰档。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上寨昙,一...
    開封第一講書人閱讀 51,231評論 1 299
  • 那天讥巡,我揣著相機與錄音,去河邊找鬼舔哪。 笑死欢顷,一個胖子當著我的面吹牛,可吹牛的內容都是我干的捉蚤。 我是一名探鬼主播抬驴,決...
    沈念sama閱讀 40,116評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼缆巧!你這毒婦竟也來了怎爵?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 38,945評論 0 275
  • 序言:老撾萬榮一對情侶失蹤盅蝗,失蹤者是張志新(化名)和其女友劉穎鳖链,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,367評論 1 313
  • 正文 獨居荒郊野嶺守林人離奇死亡芙委,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 37,581評論 2 333
  • 正文 我和宋清朗相戀三年逞敷,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片灌侣。...
    茶點故事閱讀 39,754評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡推捐,死狀恐怖,靈堂內的尸體忽然破棺而出侧啼,到底是詐尸還是另有隱情牛柒,我是刑警寧澤,帶...
    沈念sama閱讀 35,458評論 5 344
  • 正文 年R本政府宣布痊乾,位于F島的核電站皮壁,受9級特大地震影響,放射性物質發(fā)生泄漏哪审。R本人自食惡果不足惜蛾魄,卻給世界環(huán)境...
    茶點故事閱讀 41,068評論 3 327
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望湿滓。 院中可真熱鬧滴须,春花似錦、人聲如沸叽奥。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,692評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽朝氓。三九已至魔市,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間膀篮,已是汗流浹背嘹狞。 一陣腳步聲響...
    開封第一講書人閱讀 32,842評論 1 269
  • 我被黑心中介騙來泰國打工岂膳, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留誓竿,地道東北人。 一個月前我還...
    沈念sama閱讀 47,797評論 2 369
  • 正文 我出身青樓谈截,卻偏偏與公主長得像筷屡,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子簸喂,可洞房花燭夜當晚...
    茶點故事閱讀 44,654評論 2 354

推薦閱讀更多精彩內容