鉴于四月份上旬合营社支出一款桌面应用程序,在前端开发程序打包更新时相遇有的苦恼多日的难题,采用electron-builder最终照旧得到消除~

鉴于六月份上旬商户支出一款桌面应用程序,在前端开发程序打包更新时碰到有个别苦恼多日的题材,选择electron-builder最后照旧取得化解~

简介

web前端语言的上进分明, 从原本的pc web, 到后来的mobile SAP, 再到
nodejs,全站工程师应运而生. js赶快并且稳健的发展令人只好爱惜,
相应的前端开发人士的地点也尤其高,
越多的人乐意投入到前端的阵营里去.
而桌面app向来是web前端开发开发人士下意识的逃脱方向.
然而还是不乏有向往的人.于是借助于webkit内核和nodejs,出现了web移动app化解方案和web桌面app的消除方案.
而大家需求做的就是接纳熟识的前端语言借助大拿们的工具,愉悦的支出就好了.

Electron的前身是atom-shell,
是github近年来相比盛名的Atom编辑器的四个弟兄项目,它是三个依赖nodejs和Chromium,
利用HTML/CSS/JavaScript语言制造桌面应用的三个工具.
与之类似的还有壹个微软的工程师搞的NW.js,
原理基本相同. 可是个人感觉或者Electron更新更好一些,社区向上也更红火些.

切切实实的表达,咱们可以去参考官方的粤语文档

上面边操作边摘一些环境设置以及包装的底蕴:

<a href=”;

以下是踩坑的长河及对electron打包与更新思路的梳理,electron打包与立异的不易姿势应该如下图所示

以下是踩坑的进程及对electron打包与更新思路的梳理,electron打包与立异的不利姿势应该如下图所示

运营环境

倘使您创制了初期的 main.js, index.html 和 package.json
那多少个文件,你只怕会想尝尝在地方运营并测试,看看是或不是和期望的那么平时运营。

electron-prebuilt

electron-prebuilt 是1个 npm 模块,包涵所使用的 Electron 预编译版本。
首先全局安装:

npm install -g electron
//npm官方安装electron我老遇到问题,建议使用cnpm安装(后面所有的安装的时候如果出现问题就尽量使用cnpm),首先要安装cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm install -g electron

下一场您只须求依照如下情势直接运维你的使用:

electron .

只要您是一些安装,那运维:

./node_modules/.bin/electron .

设若你手工下载了 Electron
的二进制文件,你也可以一贯行使其中的二进制文件直接运营你的应用。

Windows

$ .\electron\electron.exe your-app\

Linux

$ ./electron/electron your-app/

macOS

$ ./Electron.app/Contents/MacOS/Electron your-app/

Electron.app 里面是 Electron 公布包,你可以在
这里 下载到。

electron-banner

澳门金沙国际 1

澳门金沙国际 2

web应用结构

差不多上,三个 Electron 应用的目录结构如下:

your-app/
    ├── package.json
    ├── main.js
    └── index.html

package.json的格式和 Node 的完全一致,并且尤其被 main
字段注脚的脚本文件是您的采纳的启航脚本,它运维在主进程上。你采纳里的
package.json 看起来应当像:

{
"name"    : "your-app",
"version" : "0.1.0",
"main"    : "main.js"
}

留神:倘若 main 字段没有在 package.json 表明,Electron会优先加载
index.js。由于环境基于node,所以您的js可以选用其余node模块.

main.js
应该用于创建窗口和处理连串事件,具体请参见官方的demo运用node开发桌面应用,builder落成前端程序的包装与自动更新。如故文档.

</a>

上面将各样举办叙述表达

上边将依次进行叙述表明

运用安顿(官方版本)

引言

在打包Electron
App的时候,有许多工具得以应用,各有长短,那里大约汇总多少个常用工具的特点及注意事项,便于挑选。包涵:

  • electron-packager;
  • electron-builder;
  • grunt-electron-installer(windows-installer);

瞩目:详细的设置及采用方式要求参考官方文档,本文不做赘述。

    一 、windows系统下环境部署

NPM是随NodeJS一起安装的包管理工具,能一挥而就NodeJS代码计划上的大队人马标题

  • 允许用户从NPM服务器下载别人编写的第叁方包到当地使用。
  • 同意用户从NPM服务器下载并设置旁人编写的下令行程序到本地利用。
  • 同意用户将协调编辑的包或指令行程序上传来NPM服务器供外人采用。

在windows平台系统下,使用cmd命令设置npm安装模块、electron打包所需环境

npm config set prefix "C:\Program Files (x86)\nodejs\npm_global" 设置全局模块安装路径
npm config set cache "C:\Program Files (x86)\nodejs\npm_cache" 设置缓存文件夹
npm config set registry "https://registry.npm.taobao.org" 设置淘宝镜像
electron npm config set electron_mirror "https://npm.taobao.org/mirrors/electron/"  electron可以通过设置淘宝镜像快速下载
npm config set arch ia32
npm config set target_arch ia32
npm config set disturl https://npm.taobao.org/mirrors/atom-shell
npm config set runtime electron
npm config set build_from_source true

    一 、windows系统下环境计划

NPM是随NodeJS一起安装的包管理工具,能一举成功NodeJS代码部署上的浩大题材

  • 允许用户从NPM服务器下载外人编写的第贰方包到地头使用。
  • 允许用户从NPM服务器下载并设置外人编写的指令行程序到地头使用。
  • 允许用户将协调编辑的包或指令行程序上传来NPM服务器供外人接纳。

在windows平台系统下,使用cmd命令设置npm安装模块、electron打包所需环境

npm config set prefix "C:\Program Files (x86)\nodejs\npm_global" 设置全局模块安装路径
npm config set cache "C:\Program Files (x86)\nodejs\npm_cache" 设置缓存文件夹
npm config set registry "https://registry.npm.taobao.org" 设置淘宝镜像
electron npm config set electron_mirror "https://npm.taobao.org/mirrors/electron/"  electron可以通过设置淘宝镜像快速下载
npm config set arch ia32
npm config set target_arch ia32
npm config set disturl https://npm.taobao.org/mirrors/atom-shell
npm config set runtime electron
npm config set build_from_source true

艺术一 替换已有应用的能源文件

为了接纳 Electron 计划你的应用程序,你存放应用程序的文本夹必要叫做 app
并且需求放在 Electron 的 能源文件夹下(在 macOS 中是指
Electron.app/Contents/Resources/,在 Linux 和 Windows 中是指
resources/) 就像那样:

在 macOS 中:

electron/Electron.app/Contents/Resources/app/
    ├── package.json
    ├── main.js
    └── index.html

在 Windows 和 Linux 中:

electron/resources/app
    ├── package.json
    ├── main.js
    └── index.html

下一场运转 Electron.app (可能 Linux 中的 electron,Windows 中的
electron.exe), 接着 Electron 就会以你的应用程序的不二法门运转。electron
文件夹将被安顿并可以分发给最后的使用者。

electron-packager

    贰 、打包成可举办的运作包

在electron-quick-start中,配置文件package.json中添加一句,通过npm包管理器npm
install依赖模块与 npm install electron-packager –save

"scripts": {
    "package": "electron-packager ./ --overwrite -all"
}

举行npm run package
命令,即可拿到可举办运维包,可运营包里面大概表达如下图

澳门金沙国际 3澳门金沙国际 4澳门金沙国际 5

澳门金沙国际, 由于”../electron-quick-start/electron-quick-start-win32-ia32/resources/app”路径下开发品种代码财富是裸露的,出于安全性和代码保护性考虑

就此必要asar对开发项目能源拓展二进制加密,asar加密文件澳门金沙国际 6可读不可写.

    二 、打包成可实施的运转包

在electron-quick-start中,配置文件package.json中添加一句,通过npm包管理器npm
install依赖模块与 npm install electron-packager –save

"scripts": {
    "package": "electron-packager ./ --overwrite -all"
}

履行npm run package
命令,即可取得可实施运营包,可运维包里面大概表达如下图

澳门金沙国际 7澳门金沙国际 8澳门金沙国际 9

 由于”../electron-quick-start/electron-quick-start-win32-ia32/resources/app”路径下支付项目代码能源是裸露的,出于安全性和代码爱护性考虑

所以须求asar对开发品种能源开展二进制加密,asar加密文件澳门金沙国际 10可读不可写.

方法二 asar打包

除此之外通过拷贝全体的能源文件来散发你的应用程序之外,你可以透过包装你的应用程序为壹个asar 库文件以幸免揭示你的源代码。

为了利用三个 asar 库文件替代 app 文件夹,你要求修改这一个库文件的名字为
app.asar , 然后将其内置 Electron 的能源文件夹下,然后 Electron
就会打算读取这些库文件并从中运营.

在 macOS 中:

electron/Electron.app/Contents/Resources/
    └── app.asar

在 Windows 和 Linux 中:

electron/resources/
    └── app.asar

什么打包呢?

法定提供的打包原理是将web目录打包成贰个asar,Electron
可以不用解压,即从里边读取任意文件内容。asar 包中的内容不可更改,所以
Node APIs 里那么些可以用来修改文件的艺术在对照 asar 包时都心有余而力不足符合规律办事。

安装 asar

$ npm install -g asar

用 asar pack 打包

$ asar pack your-app app.asar

使用 asar 包

在 Electron 中有两类 APIs:Node.js 提供的 Node API 和 Chromium 提供的
Web API。 那二种 API 都协理从 asar 包中读取文件。

#nodejs 从 asar 包读取一个文件:
const fs = require('fs')
fs.readFileSync('/path/to/example.asar/file.txt')

#nodejs 使用 asar 包中的一个模块:
require('/path/to/example.asar/dir/module.js')

#webapi
<script>
var $ = require('./jquery.min.js');
$.get('file:///path/to/example.asar/file.txt', function(data) {
console.log(data);
});
</script>

更详尽的求证,请参考合法文档

法定链接

  • GitHub

    三 、将打包成可举行的运维包举行asar二进制加密

安装  npm install –save-dev asar 
设置到位之后,就可以使用asar命令将裸露程序文件打包了 asar pack ./app app.asar 
澳门金沙国际 11后将app文件移除掉即可

    叁 、将打包成可进行的周转包进行asar二进制加密

安装  npm install –save-dev asar 
安装已毕未来,就足以接纳asar命令将裸露程序文件打包了 asar pack ./app app.asar 
澳门金沙国际 12后将app文件移除掉即可

改换名称与下载二进制文件

在拔取 Electron
打包你的应用程序之后,你或然须要在散发给用户此前修改打包的名字。

Windows

您可以将 electron.exe 改成自由你欢畅的名字,然后可以采取像
rcedit 编辑它的 icon 和其他音信。

macOS

你可以将 Electron.app 改成自由你喜爱的名字,然后你也亟需修改那么些文件中的
CFBundleDisplayName, CFBundleIdentifier 以及 CFBundleName 字段。
这几个文件如下:

Electron.app/Contents/Info.plist
Electron.app/Contents/Frameworks/Electron Helper.app/Contents/Info.plist

您也可以重命名协助应用程序防止止在应用程序监视器中显得 Electron Helper,
可是请保管您早已修改了援救应用的可执行文件的名字。

1个改过名字的应用程序的协会恐怕是那般的:

MyApp.app/Contents
    ├── Info.plist
    ├── MacOS/
    │   └── MyApp
    └── Frameworks/
        ├── MyApp Helper EH.app
        |   ├── Info.plist
        |   └── MacOS/
        |       └── MyApp Helper EH
        ├── MyApp Helper NP.app
        |   ├── Info.plist
        |   └── MacOS/
        |       └── MyApp Helper NP
        └── MyApp Helper.app
            ├── Info.plist
            └── MacOS/
                └── MyApp Helper

Linux

您可以将 electron 改成自由你高兴的名字。

是什么

Package your Electron app into OS-specific bundles (.app, .exe, etc.)
via JavaScript or the command line.
Electron Packager is a command line tool and Node.js library that
bundles Electron-based application source code with a renamed Electron
executable and supporting files into folders ready for distribution.

    四 、使用NSIS将可举行的运维包打成安装包

在windows系统下接纳NSIS将澳门金沙国际 13打包成可安装程序澳门金沙国际 14

下载前至NSIS 3.0
.1正式版汉化增强版

动用VNIS艾德it
编译环境切实科目请参考win7下nsis打包exe安装程序教程

生成脚本

澳门金沙国际 15澳门金沙国际 16

  1 ; 该脚本使用 HM VNISEdit 脚本编辑器向导产生
  2 
  3 ; 安装程序初始定义常量
  4 !define PRODUCT_NAME "My application"
  5 !define PRODUCT_VERSION "1.0"
  6 !define PRODUCT_PUBLISHER "My company, Inc."
  7 !define PRODUCT_WEB_SITE "http://www.mycompany.com"
  8 !define PRODUCT_DIR_REGKEY "Software\Microsoft\Windows\CurrentVersion\App Paths\electron-quick-start.exe"
  9 !define PRODUCT_UNINST_KEY "Software\Microsoft\Windows\CurrentVersion\Uninstall\${PRODUCT_NAME}"
 10 !define PRODUCT_UNINST_ROOT_KEY "HKLM"
 11 
 12 SetCompressor lzma
 13 
 14 ; ------ MUI 现代界面定义 (1.67 版本以上兼容) ------
 15 !include "MUI.nsh"
 16 
 17 ; MUI 预定义常量
 18 !define MUI_ABORTWARNING
 19 !define MUI_ICON "app.ico"
 20 !define MUI_UNICON "${NSISDIR}\Contrib\Graphics\Icons\modern-uninstall.ico"
 21 
 22 ; 欢迎页面
 23 !insertmacro MUI_PAGE_WELCOME
 24 ; 许可协议页面
 25 !insertmacro MUI_PAGE_LICENSE "..\YourSoftwareLicence.txt"
 26 ; 安装目录选择页面
 27 !insertmacro MUI_PAGE_DIRECTORY
 28 ; 安装过程页面
 29 !insertmacro MUI_PAGE_INSTFILES
 30 ; 安装完成页面
 31 !define MUI_FINISHPAGE_RUN "$INSTDIR\electron-quick-start.exe"
 32 !insertmacro MUI_PAGE_FINISH
 33 
 34 ; 安装卸载过程页面
 35 !insertmacro MUI_UNPAGE_INSTFILES
 36 
 37 ; 安装界面包含的语言设置
 38 !insertmacro MUI_LANGUAGE "SimpChinese"
 39 
 40 ; 安装预释放文件
 41 !insertmacro MUI_RESERVEFILE_INSTALLOPTIONS
 42 ; ------ MUI 现代界面定义结束 ------
 43 
 44 Name "${PRODUCT_NAME} ${PRODUCT_VERSION}"
 45 OutFile "Setup.exe"
 46 InstallDir "$PROGRAMFILES\My application"
 47 InstallDirRegKey HKLM "${PRODUCT_UNINST_KEY}" "UninstallString"
 48 ShowInstDetails show
 49 ShowUnInstDetails show
 50 
 51 Section "MainSection" SEC01
 52   SetOutPath "$INSTDIR"
 53   SetOverwrite ifnewer
 54   File /r "*.*"
 55   CreateDirectory "$SMPROGRAMS\My application"
 56   CreateShortCut "$SMPROGRAMS\My application\My application.lnk" "$INSTDIR\electron-quick-start.exe"
 57   CreateShortCut "$DESKTOP\My application.lnk" "$INSTDIR\electron-quick-start.exe"
 58   File "electron-quick-start.exe"
 59 SectionEnd
 60 
 61 Section -AdditionalIcons
 62   WriteIniStr "$INSTDIR\${PRODUCT_NAME}.url" "InternetShortcut" "URL" "${PRODUCT_WEB_SITE}"
 63   CreateShortCut "$SMPROGRAMS\My application\Website.lnk" "$INSTDIR\${PRODUCT_NAME}.url"
 64   CreateShortCut "$SMPROGRAMS\My application\Uninstall.lnk" "$INSTDIR\uninst.exe"
 65 SectionEnd
 66 
 67 Section -Post
 68   WriteUninstaller "$INSTDIR\uninst.exe"
 69   WriteRegStr HKLM "${PRODUCT_DIR_REGKEY}" "" "$INSTDIR\electron-quick-start.exe"
 70   WriteRegStr ${PRODUCT_UNINST_ROOT_KEY} "${PRODUCT_UNINST_KEY}" "DisplayName" "$(^Name)"
 71   WriteRegStr ${PRODUCT_UNINST_ROOT_KEY} "${PRODUCT_UNINST_KEY}" "UninstallString" "$INSTDIR\uninst.exe"
 72   WriteRegStr ${PRODUCT_UNINST_ROOT_KEY} "${PRODUCT_UNINST_KEY}" "DisplayIcon" "$INSTDIR\electron-quick-start.exe"
 73   WriteRegStr ${PRODUCT_UNINST_ROOT_KEY} "${PRODUCT_UNINST_KEY}" "DisplayVersion" "${PRODUCT_VERSION}"
 74   WriteRegStr ${PRODUCT_UNINST_ROOT_KEY} "${PRODUCT_UNINST_KEY}" "URLInfoAbout" "${PRODUCT_WEB_SITE}"
 75   WriteRegStr ${PRODUCT_UNINST_ROOT_KEY} "${PRODUCT_UNINST_KEY}" "Publisher" "${PRODUCT_PUBLISHER}"
 76 SectionEnd
 77 
 78 /******************************
 79  *  以下是安装程序的卸载部分  *
 80  ******************************/
 81 
 82 Section Uninstall
 83   Delete "$INSTDIR\${PRODUCT_NAME}.url"
 84   Delete "$INSTDIR\uninst.exe"
 85   Delete "$INSTDIR\electron-quick-start.exe"
 86 
 87   Delete "$SMPROGRAMS\My application\Uninstall.lnk"
 88   Delete "$SMPROGRAMS\My application\Website.lnk"
 89   Delete "$DESKTOP\My application.lnk"
 90   Delete "$SMPROGRAMS\My application\My application.lnk"
 91 
 92   RMDir "$SMPROGRAMS\My application"
 93 
 94   RMDir /r "$INSTDIR\resources"
 95   RMDir /r "$INSTDIR\locales"
 96 
 97   RMDir "$INSTDIR"
 98 
 99   DeleteRegKey ${PRODUCT_UNINST_ROOT_KEY} "${PRODUCT_UNINST_KEY}"
100   DeleteRegKey HKLM "${PRODUCT_DIR_REGKEY}"
101   SetAutoClose true
102 SectionEnd
103 
104 #-- 根据 NSIS 脚本编辑规则,所有 Function 区段必须放置在 Section 区段之后编写,以避免安装程序出现未可预知的问题。--#
105 
106 Function un.onInit
107   MessageBox MB_ICONQUESTION|MB_YESNO|MB_DEFBUTTON2 "您确实要完全移除 $(^Name) ,及其所有的组件?" IDYES +2
108   Abort
109 FunctionEnd
110 
111 Function un.onUninstSuccess
112   HideWindow
113   MessageBox MB_ICONINFORMATION|MB_OK "$(^Name) 已成功地从您的计算机移除。"
114 FunctionEnd

View Code

    四 、使用NSIS将可实施的运维包打成安装包

在windows系统下采纳NSIS将澳门金沙国际 17打包成可安装程序澳门金沙国际 18

下载前至NSIS 3.0
.1正式版汉化增强版

动用VNISEdit
编译环境切实科目请参考win7下nsis打包exe安装程序教程

生成脚本

澳门金沙国际 19澳门金沙国际 20

  1 ; 该脚本使用 HM VNISEdit 脚本编辑器向导产生
  2 
  3 ; 安装程序初始定义常量
  4 !define PRODUCT_NAME "My application"
  5 !define PRODUCT_VERSION "1.0"
  6 !define PRODUCT_PUBLISHER "My company, Inc."
  7 !define PRODUCT_WEB_SITE "http://www.mycompany.com"
  8 !define PRODUCT_DIR_REGKEY "Software\Microsoft\Windows\CurrentVersion\App Paths\electron-quick-start.exe"
  9 !define PRODUCT_UNINST_KEY "Software\Microsoft\Windows\CurrentVersion\Uninstall\${PRODUCT_NAME}"
 10 !define PRODUCT_UNINST_ROOT_KEY "HKLM"
 11 
 12 SetCompressor lzma
 13 
 14 ; ------ MUI 现代界面定义 (1.67 版本以上兼容) ------
 15 !include "MUI.nsh"
 16 
 17 ; MUI 预定义常量
 18 !define MUI_ABORTWARNING
 19 !define MUI_ICON "app.ico"
 20 !define MUI_UNICON "${NSISDIR}\Contrib\Graphics\Icons\modern-uninstall.ico"
 21 
 22 ; 欢迎页面
 23 !insertmacro MUI_PAGE_WELCOME
 24 ; 许可协议页面
 25 !insertmacro MUI_PAGE_LICENSE "..\YourSoftwareLicence.txt"
 26 ; 安装目录选择页面
 27 !insertmacro MUI_PAGE_DIRECTORY
 28 ; 安装过程页面
 29 !insertmacro MUI_PAGE_INSTFILES
 30 ; 安装完成页面
 31 !define MUI_FINISHPAGE_RUN "$INSTDIR\electron-quick-start.exe"
 32 !insertmacro MUI_PAGE_FINISH
 33 
 34 ; 安装卸载过程页面
 35 !insertmacro MUI_UNPAGE_INSTFILES
 36 
 37 ; 安装界面包含的语言设置
 38 !insertmacro MUI_LANGUAGE "SimpChinese"
 39 
 40 ; 安装预释放文件
 41 !insertmacro MUI_RESERVEFILE_INSTALLOPTIONS
 42 ; ------ MUI 现代界面定义结束 ------
 43 
 44 Name "${PRODUCT_NAME} ${PRODUCT_VERSION}"
 45 OutFile "Setup.exe"
 46 InstallDir "$PROGRAMFILES\My application"
 47 InstallDirRegKey HKLM "${PRODUCT_UNINST_KEY}" "UninstallString"
 48 ShowInstDetails show
 49 ShowUnInstDetails show
 50 
 51 Section "MainSection" SEC01
 52   SetOutPath "$INSTDIR"
 53   SetOverwrite ifnewer
 54   File /r "*.*"
 55   CreateDirectory "$SMPROGRAMS\My application"
 56   CreateShortCut "$SMPROGRAMS\My application\My application.lnk" "$INSTDIR\electron-quick-start.exe"
 57   CreateShortCut "$DESKTOP\My application.lnk" "$INSTDIR\electron-quick-start.exe"
 58   File "electron-quick-start.exe"
 59 SectionEnd
 60 
 61 Section -AdditionalIcons
 62   WriteIniStr "$INSTDIR\${PRODUCT_NAME}.url" "InternetShortcut" "URL" "${PRODUCT_WEB_SITE}"
 63   CreateShortCut "$SMPROGRAMS\My application\Website.lnk" "$INSTDIR\${PRODUCT_NAME}.url"
 64   CreateShortCut "$SMPROGRAMS\My application\Uninstall.lnk" "$INSTDIR\uninst.exe"
 65 SectionEnd
 66 
 67 Section -Post
 68   WriteUninstaller "$INSTDIR\uninst.exe"
 69   WriteRegStr HKLM "${PRODUCT_DIR_REGKEY}" "" "$INSTDIR\electron-quick-start.exe"
 70   WriteRegStr ${PRODUCT_UNINST_ROOT_KEY} "${PRODUCT_UNINST_KEY}" "DisplayName" "$(^Name)"
 71   WriteRegStr ${PRODUCT_UNINST_ROOT_KEY} "${PRODUCT_UNINST_KEY}" "UninstallString" "$INSTDIR\uninst.exe"
 72   WriteRegStr ${PRODUCT_UNINST_ROOT_KEY} "${PRODUCT_UNINST_KEY}" "DisplayIcon" "$INSTDIR\electron-quick-start.exe"
 73   WriteRegStr ${PRODUCT_UNINST_ROOT_KEY} "${PRODUCT_UNINST_KEY}" "DisplayVersion" "${PRODUCT_VERSION}"
 74   WriteRegStr ${PRODUCT_UNINST_ROOT_KEY} "${PRODUCT_UNINST_KEY}" "URLInfoAbout" "${PRODUCT_WEB_SITE}"
 75   WriteRegStr ${PRODUCT_UNINST_ROOT_KEY} "${PRODUCT_UNINST_KEY}" "Publisher" "${PRODUCT_PUBLISHER}"
 76 SectionEnd
 77 
 78 /******************************
 79  *  以下是安装程序的卸载部分  *
 80  ******************************/
 81 
 82 Section Uninstall
 83   Delete "$INSTDIR\${PRODUCT_NAME}.url"
 84   Delete "$INSTDIR\uninst.exe"
 85   Delete "$INSTDIR\electron-quick-start.exe"
 86 
 87   Delete "$SMPROGRAMS\My application\Uninstall.lnk"
 88   Delete "$SMPROGRAMS\My application\Website.lnk"
 89   Delete "$DESKTOP\My application.lnk"
 90   Delete "$SMPROGRAMS\My application\My application.lnk"
 91 
 92   RMDir "$SMPROGRAMS\My application"
 93 
 94   RMDir /r "$INSTDIR\resources"
 95   RMDir /r "$INSTDIR\locales"
 96 
 97   RMDir "$INSTDIR"
 98 
 99   DeleteRegKey ${PRODUCT_UNINST_ROOT_KEY} "${PRODUCT_UNINST_KEY}"
100   DeleteRegKey HKLM "${PRODUCT_DIR_REGKEY}"
101   SetAutoClose true
102 SectionEnd
103 
104 #-- 根据 NSIS 脚本编辑规则,所有 Function 区段必须放置在 Section 区段之后编写,以避免安装程序出现未可预知的问题。--#
105 
106 Function un.onInit
107   MessageBox MB_ICONQUESTION|MB_YESNO|MB_DEFBUTTON2 "您确实要完全移除 $(^Name) ,及其所有的组件?" IDYES +2
108   Abort
109 FunctionEnd
110 
111 Function un.onUninstSuccess
112   HideWindow
113   MessageBox MB_ICONINFORMATION|MB_OK "$(^Name) 已成功地从您的计算机移除。"
114 FunctionEnd

View Code

运用安顿(插件版本-推荐)

除开拔取官方提供的章程外,很多第壹方的模块也得以成功该包裹进度.并直接扭转各系统的安装文件。相比较常用的是
electron-packager

electron-builder.
通过npm安装后一向可以接纳命令生成安装包和运行包, 大约太便宜了.
不过或许须要对package.json做一些简便的配置.下边会分开说说.

electron-packager

electron-packager可以将品种打包成各平台可径直运维的先后,比如app,exe等。打包出来的主次至少100M,那是跨平台工具不可以幸免的缺陷。善用ignore参数,排除程序运转不需求的包。

安装

cnpm install -g electron-packager

打包命令

electron-packager <sourcedir> <sourcedir> --platform= <platform> win32,darwin --arch=all --electronVersion=1.6.10 --out=dist/ --overwrite --ignore=node_modules/electron-* --ignore=node_modules/.bin --ignore=.git --ignore=dist --prune
#*<sourcedir> : 项目的位置
#*<sourcedir> : 应用名
#*--out <out> : 指定输出的目录
#*--electronVersion=<version> : 指定编译的 electron-prebuilt 版本,可以使用前面prebuid安装的版本,查看命令  electron -h 
#--platform=<platform> : 打包的系统(darwin、win32、linux)
#--arch=<arch> : 系统位数(ia32、x64)
# --icon=<icon> : 指定应用的图标(Mac 为 .icns 文件,Windows 为 .ico 或 .png)

上边是3个例子:

electron-packager . hello ../ --electronVersion 1.6.10 --overwrite

electron-builder

与electron-packager差异,electron-builder是直接将品种打包成安装文件,比如,dmg,exe,msi.os系统,只可以打包dmg文件,window系统才能打包exe,msi文件。打完包后为主不低于40兆。

安装

npm install electron-builder
#或者
cnpm install electron-builder

设置之后,全局的话则可以运用cli命令build(那名起的真令人痛楚),局地安装则使用node_modules/.bin/build来调用命令生成压缩包,运营包和装置包.
具体的参数能够参考官方文档只怕接纳 build --help来查看

配置package.json

安插文件中必须的几项为, name, description, version and author.
同时您要带上electron-builder专用的配置键build,需求的键值appId和编译针对的连串平台参数,具体布置详情点击这里,上边是一个不难的示范:

{
"name": "helloworld",
"version": "0.1.0",
"author":"awen",
"description":"test",
"main": "main.js",
"build": {
    "appId": "com.electron.awen.hello",
    "copyright":"awen",
    "productName":"测试",
    "dmg":{
      "background":"build/background.png",
      "icon":"build/icon.icns",
      "window":{
        "x":100,
        "y":100,
        "width":500,
        "height":300
      }
    },
    "mac": {
     "category": "public.app-category.developer-tools",
     },
    "squirrelWindows":{
      "iconUrl":"https://github.com/favicon.ico"
     },
    "win": {
        "icon": "icon.ico"
    }
}
}

图标和背景

在web根目录下建3个build文本夹,里面来放图标和背景图片,当然也得以在package.json中协调布署(官方推荐应用目录,不过个人倾向于配置文件),表明如下:

webRoot
    └──build
        ├──background.png  (mac的DMG安装文件打开后的背景)
        ├──icon.icns  (mac的图标文件)
        ├──icon.ico  (windows的图标文件)
        └──icons (linux的图标文件,也可以省略直接继承mac的图标文件)
            └──32x32.png

终极打包

弄好你的条件之后您可以实施以下build
–help中的示例生成三阳台的先后,初次执行会下载对应平台的electron包.

build -mwl

多平台打包器重

编译多平台的包时,你须要设置一些依靠,当然依旧盼望在分歧平台下打包。因为上面那种方法包容性并从未想象中的好:

MacOS

#MacOS上编译windows:
brew install wine --without-x11
brew install mono
#MacOS上编译linux:
brew install gnu-tar graphicsmagick xz
#如果需要生成rpm
brew install rpm.

Linux

sudo apt-get install --no-install-recommends -y icnsutils graphicsmagick xz-utils

#生成rpm: 
sudo apt-get install --no-install-recommends -y rpm

#生成pacman: 
sudo apt-get install --no-install-recommends -y bsdtar

#Linux上编译windows:
##安装(wine1.8+)
sudo add-apt-repository ppa:ubuntu-wine/ppa -y
sudo apt-get update
sudo apt-get install --no-install-recommends -y wine1.8
##安装mono(4.2+)
sudo apt-key adv --keyserver hkp://keyserver.ubuntu.com:80 --recv-keys 3FA7E0328081BFF6A14DA29AA6A19B38D3D831EF
echo "deb http://download.mono-project.com/repo/debian wheezy main" | sudo tee /etc/apt/sources.list.d/mono-xamarin.list
sudo apt-get update
sudo apt-get install --no-install-recommends -y mono-devel ca-certificates-mono

#64位机器上编译32位的包
sudo apt-get install --no-install-recommends -y gcc-multilib g++-multilib

Windows

使用
Docker

应用方式

该工具提供了二种拔取格局:JS API(Node.js
library)和CLI。详细使用方法请访问官方文档。下边是在命令行中使用的例证:

"scripts": {
    "package": "electron-packager . --platform=win32 --arch=ia32 --electron-version=1.4.15 --overwrite --ignore=node_modules --ignore=.gitignore"
},

    ⑤ 、windows系统安装程序更新

设置npm install  electron-updater 在运用中触发更新检查, electron-updater 自动会通过对应url下的yml文件检查更新

在输入文件main.js中需注意

1 //if you don't use ES6: const autoUpdater = require("electron-updater").autoUpdater
2 const autoUpdater = require('electron-updater').autoUpdater

//ipcMain 主线程
const ipcMain = require('electron').ipcMain

autoUpdater

  1 // 检测更新,在你想要检查更新的时候执行,renderer事件触发后的操作自行编写
  2 function updateHandle(){
  3     //minimize
  4     ipcMain.on('hide-window', () => {
  5         mainWindow.minimize();
  6     });
  7     //maximize
  8     ipcMain.on('show-window', () => {
  9         mainWindow.maximize();
 10     });
 11     //unmaximize
 12     ipcMain.on('orignal-window', () => {
 13         mainWindow.unmaximize();
 14     });
 15     //打开默认浏览器
 16     ipcMain.on('open-office-website', function(event, arg){
 17         shell.openExternal(arg)
 18     })
 19     
 20     ipcMain.on('check-for-update', function(event, arg) {
 21         let message={
 22             appName:'智卡桌面应用讨论',
 23             error:'检查更新出错, 请联系开发人员',
 24             checking:'正在检查更新……',
 25             updateAva:'检测到新版本,正在下载……',
 26             updateNotAva:'现在使用的就是最新版本,不用更新',
 27             downloaded: '最新版本已下载,将在重启程序后更新'
 28         };
 29         //设置检查更新的 url,并且初始化自动更新。这个 url 一旦设置就无法更改。
 30         const updateFeedUrl='http://www.baidu.com/updates/latest/win/';
 31         if(os.platform()==='darwin'){
 32             updateFeedUrl='http://www.baidu.com/updates/latest/mac/';
 33         }
 34         autoUpdater.setFeedURL(updateFeedUrl);
 35 
 36         autoUpdater.on('error', function(error){
 37             return dialog.showMessageBox(mainWindow, {
 38                     type: 'info',
 39                     buttons: ['OK'],
 40                     title: message.appName,
 41                     message: message.errorTips,
 42                     detail: '\r' + message.error
 43                 });
 44 
 45             sendUpdateMessage(message.error)
 46         });
 47 
 48         //当开始检查更新的时候触发
 49         autoUpdater.on('checking-for-update', function() {
 50             sendUpdateMessage(message.checking)
 51             return dialog.showMessageBox(mainWindow, {
 52                     type: 'info',
 53                     buttons: ['OK'],
 54                     title: message.appName,
 55                     message: message.checking
 56                 });
 57         });
 58 
 59         //当发现一个可用更新的时候触发,更新包下载会自动开始
 60         autoUpdater.on('update-available', function(info) {
 61             sendUpdateMessage(message.updateAva)
 62             var downloadConfirmation = dialog.showMessageBox(mainWindow, {
 63                 type: 'info',
 64                 buttons: ['OK'],
 65                 title: message.appName,
 66                 message: message.updateAva
 67             });
 68             if (downloadConfirmation === 0) {
 69                 return;
 70             }
 71         });
 72 
 73         //当没有可用更新的时候触发
 74         autoUpdater.on('update-not-available', function(info) {
 75             return dialog.showMessageBox(mainWindow, {
 76                 type: 'info',
 77                 buttons: ['OK'],
 78                 title: message.appName,
 79                 message: message.updateNotAva
 80             });
 81             sendUpdateMessage(message.updateNotAva)
 82         });
 83         
 84         // 更新下载进度事件
 85         autoUpdater.on('download-progress', function(progressObj) {
 86             mainWindow.webContents.send('downloadProgress', progressObj)
 87         })
 88         /**
 89          *  event Event
 90          *  releaseNotes String - 新版本更新公告
 91          *  releaseName String - 新的版本号
 92          *  releaseDate Date - 新版本发布的日期
 93          *  updateURL String - 更新地址
 94          * */
 95         autoUpdater.on('update-downloaded',  function (event, releaseNotes, releaseName, releaseDate, updateUrl, quitAndUpdate) {
 96             var index = dialog.showMessageBox(mainWindow, {
 97                 type: 'info',
 98                 buttons: ['现在重启', '稍后重启'],
 99                 title: message.appName,
100                 message: message.downloaded,
101                 //detail: releaseName + "\n\n" + releaseNotes
102             });
103             console.log(index);
104             if (index === 1) return;
105             //在下载完成后,重启当前的应用并且安装更新
106             autoUpdater.quitAndInstall();
107             //通过main进程发送事件给renderer进程,提示更新信息
108             //mainWindow.webContents.send('isUpdateNow')
109         });
110         
111         //执行自动更新检查
112         autoUpdater.checkForUpdates();
113     });
114 }

 Squirrel.Windows 是windows系统下electron-updater 检查更新lib库 

至于Squirrel.Windows 更详实表明,请连接至

Squirrel is both a set of tools and a library, to completely manage both installation and updating your Desktop Windows application, 
written in either C# or any other language (i.e., Squirrel can manage native C++ applications).  

澳门金沙国际 21

    ⑤ 、windows系统安装程序更新

设置npm install  electron-updater 在选择中触发更新检查, electron-updater 自动会通过对应url下的yml文件检查更新

在输入文件main.js中需注意

1 //if you don't use ES6: const autoUpdater = require("electron-updater").autoUpdater
2 const autoUpdater = require('electron-updater').autoUpdater

//ipcMain 主线程
const ipcMain = require('electron').ipcMain

autoUpdater

  1 // 检测更新,在你想要检查更新的时候执行,renderer事件触发后的操作自行编写
  2 function updateHandle(){
  3     //minimize
  4     ipcMain.on('hide-window', () => {
  5         mainWindow.minimize();
  6     });
  7     //maximize
  8     ipcMain.on('show-window', () => {
  9         mainWindow.maximize();
 10     });
 11     //unmaximize
 12     ipcMain.on('orignal-window', () => {
 13         mainWindow.unmaximize();
 14     });
 15     //打开默认浏览器
 16     ipcMain.on('open-office-website', function(event, arg){
 17         shell.openExternal(arg)
 18     })
 19     
 20     ipcMain.on('check-for-update', function(event, arg) {
 21         let message={
 22             appName:'智卡桌面应用讨论',
 23             error:'检查更新出错, 请联系开发人员',
 24             checking:'正在检查更新……',
 25             updateAva:'检测到新版本,正在下载……',
 26             updateNotAva:'现在使用的就是最新版本,不用更新',
 27             downloaded: '最新版本已下载,将在重启程序后更新'
 28         };
 29         //设置检查更新的 url,并且初始化自动更新。这个 url 一旦设置就无法更改。
 30         const updateFeedUrl='http://www.baidu.com/updates/latest/win/';
 31         if(os.platform()==='darwin'){
 32             updateFeedUrl='http://www.baidu.com/updates/latest/mac/';
 33         }
 34         autoUpdater.setFeedURL(updateFeedUrl);
 35 
 36         autoUpdater.on('error', function(error){
 37             return dialog.showMessageBox(mainWindow, {
 38                     type: 'info',
 39                     buttons: ['OK'],
 40                     title: message.appName,
 41                     message: message.errorTips,
 42                     detail: '\r' + message.error
 43                 });
 44 
 45             sendUpdateMessage(message.error)
 46         });
 47 
 48         //当开始检查更新的时候触发
 49         autoUpdater.on('checking-for-update', function() {
 50             sendUpdateMessage(message.checking)
 51             return dialog.showMessageBox(mainWindow, {
 52                     type: 'info',
 53                     buttons: ['OK'],
 54                     title: message.appName,
 55                     message: message.checking
 56                 });
 57         });
 58 
 59         //当发现一个可用更新的时候触发,更新包下载会自动开始
 60         autoUpdater.on('update-available', function(info) {
 61             sendUpdateMessage(message.updateAva)
 62             var downloadConfirmation = dialog.showMessageBox(mainWindow, {
 63                 type: 'info',
 64                 buttons: ['OK'],
 65                 title: message.appName,
 66                 message: message.updateAva
 67             });
 68             if (downloadConfirmation === 0) {
 69                 return;
 70             }
 71         });
 72 
 73         //当没有可用更新的时候触发
 74         autoUpdater.on('update-not-available', function(info) {
 75             return dialog.showMessageBox(mainWindow, {
 76                 type: 'info',
 77                 buttons: ['OK'],
 78                 title: message.appName,
 79                 message: message.updateNotAva
 80             });
 81             sendUpdateMessage(message.updateNotAva)
 82         });
 83         
 84         // 更新下载进度事件
 85         autoUpdater.on('download-progress', function(progressObj) {
 86             mainWindow.webContents.send('downloadProgress', progressObj)
 87         })
 88         /**
 89          *  event Event
 90          *  releaseNotes String - 新版本更新公告
 91          *  releaseName String - 新的版本号
 92          *  releaseDate Date - 新版本发布的日期
 93          *  updateURL String - 更新地址
 94          * */
 95         autoUpdater.on('update-downloaded',  function (event, releaseNotes, releaseName, releaseDate, updateUrl, quitAndUpdate) {
 96             var index = dialog.showMessageBox(mainWindow, {
 97                 type: 'info',
 98                 buttons: ['现在重启', '稍后重启'],
 99                 title: message.appName,
100                 message: message.downloaded,
101                 //detail: releaseName + "\n\n" + releaseNotes
102             });
103             console.log(index);
104             if (index === 1) return;
105             //在下载完成后,重启当前的应用并且安装更新
106             autoUpdater.quitAndInstall();
107             //通过main进程发送事件给renderer进程,提示更新信息
108             //mainWindow.webContents.send('isUpdateNow')
109         });
110         
111         //执行自动更新检查
112         autoUpdater.checkForUpdates();
113     });
114 }

 Squirrel.Windows 是windows系统下electron-updater 检查更新lib库 

有关Squirrel.Windows 更详尽表明,请连接至

Squirrel is both a set of tools and a library, to completely manage both installation and updating your Desktop Windows application, 
written in either C# or any other language (i.e., Squirrel can manage native C++ applications).  

澳门金沙国际 22

特点

  • 选择 electron-packager
    打包,macOS系统打包app文件,不恐怕打包exe文件,windows系统能够打包app文件以及exe文件;
  • 支持平台有:Windows (32/64 bit)、OS X (also known as macOS)、Linux
    (x86/x86_64);
  • 转变的格式:.exe(那里不可能生成安装包,只可以生成可执行文件及目录)、.app、mas、linux可实施格式;
  • 可选项;
  • 协理CLI和JS API二种采用方式;

    ⑥ 、主线程与渲染线程之间通讯

点击更新按钮后

1 //检查更新
2  $("#accLogin").find(".T-updateApp").on("click", function() {
3          setTimeout(function() {
4              //update 渲染进程 
5              ipcr.send('check-for-update', 'event-update');
6          }, 20);
7 });

触发主线程(上述手续五 updateHandle 方法中) ipcMain.on(‘check-for-update’, function(event, arg) { //执行操作
}) 检查更新 autoUpdater各类状态

ipcMain.on('check-for-update', function(event, arg) {
        //设置检查更新的 url,并且初始化自动更新。这个 url 一旦设置就无法更改。
        const updateFeedUrl='http://www.baidu.com/updates/latest/win/';
        if(os.platform()==='darwin'){
            updateFeedUrl='http://www.baidu.com/updates/latest/mac/';
        }
        autoUpdater.setFeedURL(updateFeedUrl);

        autoUpdater.on('error', function(error){});

        //当开始检查更新的时候触发
        autoUpdater.on('checking-for-update', function() {});

        //当发现一个可用更新的时候触发,更新包下载会自动开始
        autoUpdater.on('update-available', function(info) {});

        //当没有可用更新的时候触发
        autoUpdater.on('update-not-available', function(info) {});

        // 更新下载进度事件
        autoUpdater.on('download-progress', function(progressObj) {})
        /**
         *  event Event
         *  releaseNotes String - 新版本更新公告
         *  releaseName String - 新的版本号
         *  releaseDate Date - 新版本发布的日期
         *  updateURL String - 更新地址
         * */
        autoUpdater.on('update-downloaded',  function (event, releaseNotes, releaseName, releaseDate, updateUrl, quitAndUpdate) {});

        //执行自动更新检查
        autoUpdater.checkForUpdates();
});

    陆 、主线程与渲染线程之间通信

点击更新按钮后

1 //检查更新
2  $("#accLogin").find(".T-updateApp").on("click", function() {
3          setTimeout(function() {
4              //update 渲染进程 
5              ipcr.send('check-for-update', 'event-update');
6          }, 20);
7 });

触发主线程(上述手续五 updateHandle 方法中) ipcMain.on(‘check-for-update’, function(event, arg) { //执行操作
}) 检查更新 autoUpdater各类景况

ipcMain.on('check-for-update', function(event, arg) {
        //设置检查更新的 url,并且初始化自动更新。这个 url 一旦设置就无法更改。
        const updateFeedUrl='http://www.baidu.com/updates/latest/win/';
        if(os.platform()==='darwin'){
            updateFeedUrl='http://www.baidu.com/updates/latest/mac/';
        }
        autoUpdater.setFeedURL(updateFeedUrl);

        autoUpdater.on('error', function(error){});

        //当开始检查更新的时候触发
        autoUpdater.on('checking-for-update', function() {});

        //当发现一个可用更新的时候触发,更新包下载会自动开始
        autoUpdater.on('update-available', function(info) {});

        //当没有可用更新的时候触发
        autoUpdater.on('update-not-available', function(info) {});

        // 更新下载进度事件
        autoUpdater.on('download-progress', function(progressObj) {})
        /**
         *  event Event
         *  releaseNotes String - 新版本更新公告
         *  releaseName String - 新的版本号
         *  releaseDate Date - 新版本发布的日期
         *  updateURL String - 更新地址
         * */
        autoUpdater.on('update-downloaded',  function (event, releaseNotes, releaseName, releaseDate, updateUrl, quitAndUpdate) {});

        //执行自动更新检查
        autoUpdater.checkForUpdates();
});

electron-builder

    7、electron-builder 消除方案(项目打包、运维包、安装包、更新、资助多平台)

A complete solution to package and build a ready for distribution
Electron app with “auto update” support out of the box

(大约意思
electron-builder3个完好无损的化解方案,打包和建立三个分发的electron程序与“auto
update”协助开箱即用)

经过上述六点知识统计,简单了解electron-builder,那里附一package.json配置文件,后边博主将抽时间写一篇关于electron-builder打包、更新更详细小说

{
  "name": "electron-build",
  "version": "1.6.13",
  "main": "src/main.js",
  "description": "electron-build project",
  "author": "Avenstar",
  "license": "",
  "devDependencies": {
    "electron": "^1.4.15",
    "electron-builder": "^12.3.1"
  },
  "dependencies": {
    "electron-updater": "^1.4.2"
  },
  "scripts": {
    "pack": "electron-builder --dir",
    "build": "electron-builder",
    "dev": "electron src/main.js"
  },
  "keywords": [
    "electron",
    "updater",
    "update",
    "mac",
    "osx",
    "linux",
    "desktop"
  ],
  "build": {
    "appId": "com.cilent.app.electronbuild",
    "productName": "electron-build",
    "directories": {
      "output": "build"
    },
    "files": [
      "src/**/*",
      "node_modules/**/*",
      "package.json"
    ],
    "dmg": {
      "contents": [
        {
          "x": 410,
          "y": 150,
          "type": "link",
          "path": "/Applications"
        },
        {
          "x": 130,
          "y": 150,
          "type": "file"
        }
      ]
    },
    "mac": {
      "category": "your.app.category.type",
       "icon": "static/icons/app.icns",
      "target": [
        "zip",
        "dmg"
      ],
      "publish": [
        {
          "provider":"generic",
          "url":"http://www.baidu.com/updates/latest/mac/"
        }
      ]
    },
    "win": {
      "icon": "static/icons/icon.ico",
      "target": [
        "nsis",
        "zip"
      ],
      "publish": [
        {
          "provider":"generic",
          "url":"http://www.baidu.com/updates/latest/win/"
        }
      ]
    },
    "linux": {
      "icon": "static/icons"
    },
    "nsis":{
      "oneClick":true,
      "artifactName":"${productName}-setup-${version}.${ext}"
    }
  }
}

作者:Avenstar

出处:http://www.cnblogs.com/zjf-1992/p/7354931.html

至于小编:专注于前端开发

本文版权归小编全体,转发请标明原文链接

材质参考

 
  

 
  

 
  

   

   

   

   

 
  

   

    ⑦ 、electron-builder 消除方案(项目打包、运行包、安装包、更新、协助多平台)

A complete solution to package and build a ready for distribution
Electron app with “auto update” support out of the box

(大概意思
electron-builder一个完完全全的缓解方案,打包和确立3个分发的electron程序与“auto
update”帮衬开箱即用)

通过以上六点知识计算,简单掌握electron-builder,那里附一package.json配置文件,后边博主将抽时间写一篇关于electron-builder打包、更新更详实文章

{
  "name": "electron-build",
  "version": "1.6.13",
  "main": "src/main.js",
  "description": "electron-build project",
  "author": "Avenstar",
  "license": "",
  "devDependencies": {
    "electron": "^1.4.15",
    "electron-builder": "^12.3.1"
  },
  "dependencies": {
    "electron-updater": "^1.4.2"
  },
  "scripts": {
    "pack": "electron-builder --dir",
    "build": "electron-builder",
    "dev": "electron src/main.js"
  },
  "keywords": [
    "electron",
    "updater",
    "update",
    "mac",
    "osx",
    "linux",
    "desktop"
  ],
  "build": {
    "appId": "com.cilent.app.electronbuild",
    "productName": "electron-build",
    "directories": {
      "output": "build"
    },
    "files": [
      "src/**/*",
      "node_modules/**/*",
      "package.json"
    ],
    "dmg": {
      "contents": [
        {
          "x": 410,
          "y": 150,
          "type": "link",
          "path": "/Applications"
        },
        {
          "x": 130,
          "y": 150,
          "type": "file"
        }
      ]
    },
    "mac": {
      "category": "your.app.category.type",
       "icon": "static/icons/app.icns",
      "target": [
        "zip",
        "dmg"
      ],
      "publish": [
        {
          "provider":"generic",
          "url":"http://www.baidu.com/updates/latest/mac/"
        }
      ]
    },
    "win": {
      "icon": "static/icons/icon.ico",
      "target": [
        "nsis",
        "zip"
      ],
      "publish": [
        {
          "provider":"generic",
          "url":"http://www.baidu.com/updates/latest/win/"
        }
      ]
    },
    "linux": {
      "icon": "static/icons"
    },
    "nsis":{
      "oneClick":true,
      "artifactName":"${productName}-setup-${version}.${ext}"
    }
  }
}

作者:Avenstar

出处:http://www.cnblogs.com/zjf-1992/p/7354931.html

有关小编:专注于前端开发

正文版权归小编全数,转发请标明原文链接

材料参考

 
  

 
  

 
  

   

   

   

   

 
  

   

法定接连

  • GitHhub

是什么

A complete solution to package and build a ready for distribution
Electron app for macOS, Windows and Linux with “auto update” support
out of the box.

运用形式

在 package.json中添加如下配置:

"scripts": {
    "pack": "build --win --ia32 --dir",
    "dist": "build --win --ia32"
},
"build": {
    "appId": "org.shennongmin.QuickStart",
    "copyright": "Open Totally",
    "compression": "normal",
    "nsis": {
        "oneClick": true,
        "perMachine": true,
        "runAfterFinish": true
    }
},

特点

  • electron-builder
    可以打包成msi、exe、dmg文件,macOS系统,只能够打包dmg文件,window系统才能打包exe,msi文件;
  • 差一些协理了颇具平台的富有格式;
  • 可以将prepackage目录(手动或利用electron-packager生成的目录)打包成安装包;
  • 支持Auto
    Update;
  • 非凡充裕的取舍;
  • 支撑CLI和JS API二种拔取办法;

grunt-electron-installer

合法链接

https://github.com/electron-archive/grunt-electron-installer

是什么

Grunt plugin that builds Windows installers for Electron apps using
Squirrel.

使用办法

先用 electron-packager
将采用打包到应用目录下,例如:SNM Quick Start-win32-ia32

在行使目录下新文件 gruntPackage.json,内容如下:

{
    "name": "SNM_Quick_Start",
    "version": "1.7.8"
}

在使用目录下新文件 Gruntfile.js,内容如下:

var grunt = require("grunt");
grunt.config.init({
        pkg: grunt.file.readJSON('gruntPackage.json'),
        'create-windows-installer': {
                ia32: {
                        appDirectory: 'SNM Quick Start-win32-ia32',
                        authors: 'shen nongmin',
                        exe: 'SNM Quick Start.exe',
                        description: "this is a test",
                }       
        }
})

grunt.loadNpmTasks('grunt-electron-installer');
grunt.registerTask('default', ['create-windows-installer']);

安装grunt和grunt-electron-installer:

npm install -g grunt-cli
npm install grunt grunt-electron-installer --save-dev

在接纳目录下进行grunt:

grunt

随之会在变化的installer目录中富含如下多少个文本:

RELEASES
SNM Quick StartSetup.exe
SNM Quick StartSetup.msi
SNMQuickStart-1.7.8-full.nupkg

其中,.exe可以设置(如需支撑Squirrel则需求对main.js举办改动,那里不介绍)。

特点

  • 只支持Windows系统;
  • 支持Squirrel;
  • 只资助命令行使用;
  • 依赖windows-installer;
  • 可选项;

关于协理Squirrel的链接

  • http://electron.atom.io/docs/api/auto-updater/
  • https://github.com/electron/windows-installer\#handling-squirrel-events
  • https://github.com/mongodb-js/electron-squirrel-startup

读书原文
| 笔者官网 |
公众号
|
Feed
|
订阅
|
发私信

相关文章