澳门新浦京娱乐场网站-www.146.net-新浦京娱乐场官网
做最好的网站

澳门新浦京娱乐场网站builder实现前端程序的打包

由于7月份上旬公司支出一款桌面应用程序,在前端开荒程序打包更新时相遇一些困扰多日的主题材料,选用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=";

简介

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更新越来越好一些,社区发展也更吉庆些.

切切实实的注解,大家能够去参谋官方的中文文书档案

下边边操作边摘一些条件设置以及包装的根底:

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

运行条件

设若您创设了前期的 main.js, index.html 和 package.json 那多少个文件,你只怕会想尝尝在地点运营并测验,看看是否和愿意的那么正常运作。

electron-prebuilt

electron-prebuilt 是二个 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

$ .electronelectron.exe your-app

Linux

$ ./electron/electron your-app/

macOS

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

Electron.app 里面是 Electron 发布包,你能够在 这里 下载到。

electron-banner

运转蒙受

固然您创建了前期的 main.js, index.html 和 package.json 这多少个公文,你也许会想尝尝在地面运转并测量检验,看看是或不是和梦想的那么不奇怪运行。

electron-prebuilt

electron-prebuilt 是一个 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

$ .electronelectron.exe your-app

Linux

$ ./electron/electron your-app/

macOS

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

Electron.app 里面是 Electron 发布包,你能够在 这里 下载到。

澳门新浦京娱乐场网站 1

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要么文书档案.

</a>

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要么文书档案.

下边将种种开始展览陈述表明

动用计划(官方版本)

引言

在打包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)nodejsnpm_global" 设置全局模块安装路径
npm config set cache "C:Program Files (x86)nodejsnpm_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 布署你的应用程序,你存放应用程序的文书夹须求叫做 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-quick-start中,配置文件package.json中增加一句,通过npm包管理器npm install注重模块与 npm install electron-packager --save

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

实行npm run package 命令,即可获得可实践运营李包裹,可运转李包裹里面差不离表明如下图

澳门新浦京娱乐场网站 2澳门新浦京娱乐场网站 3澳门新浦京娱乐场网站 4

 由于"../electron-quick-start/electron-quick-start-win32-ia32/resources/app"路线下开荒品种代码能源是裸露的,出于安全性和代码爱戴性思量

就此要求asar对开垦品种能源实行二进制加密,asar加密文件澳门新浦京娱乐场网站 5可读不可写.

方法二 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打包

而外通过拷贝全部的能源文件来散发你的应用程序之外,你能够由此包装你的应用程序为三个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>

更详细的辨证,请参见合法文书档案

    三、将打包成可实施的运行李包裹实行asar二进制加密

安装  npm install --save-dev asar 
安装到位之后,就足以运用asar命令将裸露程序文件打包了 asar pack ./app app.asar 
澳门新浦京娱乐场网站 6后将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, 但是请保管您曾经修改了声援应用的可实行文件的名字。

三个改过名字的应用程序的构造或许是这么的:

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.

转移名称与下载二进制文件

在运用 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, 不过请确定保证您已经修改了扶助应用的可实施文件的名字。

二个改过名字的应用程序的布局或许是那般的:

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 改成自由你喜爱的名字。

    四、使用NSIS将可实行的运作包打成安装包

在windows系统下行使NSIS将澳门新浦京娱乐场网站 7打包成可安装程序澳门新浦京娱乐场网站 8

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

利用VNISEdit 编写翻译情状切实科目请参见win7下nsis打包exe安装程序教程

生成脚本

澳门新浦京娱乐场网站 9澳门新浦京娱乐场网站 10

  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 "SoftwareMicrosoftWindowsCurrentVersionApp Pathselectron-quick-start.exe"
  9 !define PRODUCT_UNINST_KEY "SoftwareMicrosoftWindowsCurrentVersionUninstall${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}ContribGraphicsIconsmodern-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 "$INSTDIRelectron-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 "$PROGRAMFILESMy 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 "$SMPROGRAMSMy application"
 56   CreateShortCut "$SMPROGRAMSMy applicationMy application.lnk" "$INSTDIRelectron-quick-start.exe"
 57   CreateShortCut "$DESKTOPMy application.lnk" "$INSTDIRelectron-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 "$SMPROGRAMSMy applicationWebsite.lnk" "$INSTDIR${PRODUCT_NAME}.url"
 64   CreateShortCut "$SMPROGRAMSMy applicationUninstall.lnk" "$INSTDIRuninst.exe"
 65 SectionEnd
 66 
 67 Section -Post
 68   WriteUninstaller "$INSTDIRuninst.exe"
 69   WriteRegStr HKLM "${PRODUCT_DIR_REGKEY}" "" "$INSTDIRelectron-quick-start.exe"
 70   WriteRegStr ${PRODUCT_UNINST_ROOT_KEY} "${PRODUCT_UNINST_KEY}" "DisplayName" "$(^Name)"
 71   WriteRegStr ${PRODUCT_UNINST_ROOT_KEY} "${PRODUCT_UNINST_KEY}" "UninstallString" "$INSTDIRuninst.exe"
 72   WriteRegStr ${PRODUCT_UNINST_ROOT_KEY} "${PRODUCT_UNINST_KEY}" "DisplayIcon" "$INSTDIRelectron-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 "$INSTDIRuninst.exe"
 85   Delete "$INSTDIRelectron-quick-start.exe"
 86 
 87   Delete "$SMPROGRAMSMy applicationUninstall.lnk"
 88   Delete "$SMPROGRAMSMy applicationWebsite.lnk"
 89   Delete "$DESKTOPMy application.lnk"
 90   Delete "$SMPROGRAMSMy applicationMy application.lnk"
 91 
 92   RMDir "$SMPROGRAMSMy application"
 93 
 94   RMDir /r "$INSTDIRresources"
 95   RMDir /r "$INSTDIRlocales"
 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)

上面是贰个例子:

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"
    }
}
}

Logo和背景

在web根目录下建三个build文本夹,里面来放Logo和背景图片,当然也足以在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"
},

选择安排(插件版本-推荐)

而外采用官方提供的不二秘诀外,许多第三方的模块也得以做到该包裹进度.并直接扭转各系统的安装文件。相比较常用的是 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)

上边是八个事例:

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"
    }
}
}

Logo和背景

在web根目录下建两个build文件夹,里面来放Logo和背景图片,当然也足以在package.json中和煦布署(官方推荐应用目录,然而个人倾向于配置文件),表达如下:

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

最后打包

澳门新浦京娱乐场网站builder实现前端程序的打包与自动更新,App打包工具。弄好你的条件之后您能够试行以下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

    五、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   "nn"   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).  

澳门新浦京娱乐场网站 11

特点

  • 采纳 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();
});

electron-builder

    七、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多少个一体化的化解方案,打包和树立三个散发的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

至于笔者:专注于前端开辟

正文版权归小编全体,转发请标记原来的书文链接

质地参照他事他说加以调查

    

    

    

   

   

澳门新浦京娱乐场网站builder实现前端程序的打包与自动更新,App打包工具。   

   

    

   

官方接连

  • 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 | 订阅 | 发私信

本文由澳门新浦京娱乐场网站发布于澳门新浦京娱乐场网站,转载请注明出处:澳门新浦京娱乐场网站builder实现前端程序的打包