澳门新萄京官方网站-www.8455.com-澳门新萄京赌场网址

澳门新萄京官方网站:App打包工具,利用node开发

2019-07-28 作者:澳门新萄京官方网站   |   浏览(197)

由于8月份上旬公司开发一款桌面应用程序,在前端开发程序打包更新时遇到一些困扰多日的问题,采用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"
    }
}
}

图标和背景

在web根目录下建一个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"
},

应用部署(插件版本-推荐)

除了使用官方提供的方法外,很多第三方的模块也可以完成该打包过程.并直接生成各系统的安装文件。比较常用的是 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"
    }
}
}

图标和背景

在web根目录下建一个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

    五、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 }

澳门新萄京官方网站:App打包工具,利用node开发桌面应用。 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

关于作者:专注于前端开发

本文版权归作者所有,转载请标明原文链接

资料参考

    

    

    

   

   

   

   

    

   

官方连接

  • 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;
  • 可选项;

澳门新萄京官方网站:App打包工具,利用node开发桌面应用。关于支持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 | 订阅 | 发私信

本文由澳门新萄京官方网站发布于澳门新萄京官方网站,转载请注明出处:澳门新萄京官方网站:App打包工具,利用node开发

关键词: