如何将electron框架开发的软件包打包成单一exe文件

如何将electron框架开发的软件包打包成单一exe文件~

前言：研究electron自动更新的时候，在electron的官方文档auto-updater 中，提到了在几个平台mac，linux，windows下electron 的自动更新方法，其中windsow平台上面，文章中建议先用grunt-electron-installer 模块来创建windows安装包，grunt这个工具是由Squirrel集成的。进而了解下Squirrel这个工具，
一个可以用来给electron应用的安装更新卸载添加快捷方式的工具。本文主要提及如何在windows平台下，用Squirrel创建electron的.exe安装包。

创建nuget包

我们的方法是使用nuget工具创建Nuget包，再使用Squirrel工具创建.exe。

1.下载squirrel.exe和nuget.exe，也可以选择直接安装Squirrel.Windows （需要有vitual
studio环境）。

2.新建文件夹如my-build，把下载好的squirrel.exe，nuget.exe和setup.exe

放进去，在文件夹放入我们未打包的electron应用，如下图：

4.在my-build根目录中，打开命令行执行nuget spec

如下图：

生成 spec包初始文件

5.编辑器打开 Package.nuspec，按照自己项目的需要编辑这个文件，如下图：

这里需要注意：根据Squirrel文档说明，target folder 属性需要设置为lib/net45，否则并没有用；标签用来制定未来的exe的icon。

5.用下面的命令创建一个nuget包，

nuget pack Package.nuspec

如下图：

之后在目录中会出现这个包

命名规则就是..nupkg

创建安装程序

把应用程序打包成nuget包之后，就可以用squirrel创建一个安装程序了。在根目录打开命令行，执行以下命令：

squirrel --releasify ..nupkg

这个时候命令行中没有任何提示。但是别慌，编译一段时间后程序会创建一个release文件夹，里面有三个文件，nuget包，RELEASES 文件和安装文件Setup.exe。如下图：

如果没有出现这三个文件，可以查看目录中的SquirrelSetup.log，根据里面的报错，来进行调试。

注意上面这条squirrel 命令，可以用来设置setup.exe在安装过程中用传统icon还是用自定义的图片文件。使用Squirrel --help可以查看更多帮助

发布应用和安装应用

把上一步生成的setup.exe发送给想要安装这个应用的用户，就可以了。

最终应用会被安装在C:\Users\Administrator\AppData\Local\[appname] 文件夹中，注意Squirrel 的日志文件也存在目录中，调试安装问题的时候非常有用。

双击我们的setup.exe进行安装app的测试，如果中途有任何出错，在

C:\Users\Administrator\AppData\Local\SquirrelTemp 里面可以看到安装日志。如下图：

安装之后打开C:\Users\Administrator\AppData\Local 目录，可以看到app安装在这里，如下图：

自动创建快捷方式

进入我们安装之后的文件夹，命令行进入C:\Users\Administrator\AppData\Local\[your appname]，执行 Update.exe --help ，可以看到

不知道从上图你有没有得到什么提示，反正我发现了，在命令行手动创建快捷方式的命令是Update.exe --createshortcut electron\electron.exe -i [your ico toute]\app.ico

所以，如果我们想让应用在安装过程中静默地创建好快捷方式，那就需要在app的安装之后相反设法执行这句代码。

因为我们的.exe会在安装之后自动打开程序，所以我在程序的入口main.js，添加sqruieel事件的监听就好了。如下图：

我顺便把程序卸载时，删除快捷方式的监听事件也写了进去。还有程序的更新和删除事件监听，但是这两个事件，我还没有进行测试。

更新应用

其实我一直很想做增量更新，在这里我的更新方法有两个，第一是在程序的入口添加js，发送请求到服务器，拉取更改文件进行本地替换，但是如果是node_module依赖包的更改，这个方法并不可行。第二个方法比较安全而且快捷通过发布一个版本号不同的exe，如下：1.在这个创建安装程序的步骤2中，我们把程序代码都复制到了这个文件夹里面，如下图：

如果后续我们的程序要进行更新，首先我们需要把更改的文件直接复制替换到这个文件夹。

2.打开Package.nuspec，编辑version标签

3.参考本文种中创建安装程序部分的步骤2-4，重新生成setup.exe，发布应用。

通过执行setip.exe安装，程序会自动删除之前的应用，但是我并不清楚，sqruieel 是进行了增量替换，还是将之前的整个应用进行删除，再重新安装。

创建自定义安装包

在上一步，我们已经把自己的exe发布出来了，但是如果没有自定义名字跟icon，好像还不够酷，所以我们需要创建自定义的安装文件。

1.下载安装 Resource
Hacker

2.打开这个项目目录，在electron.exe上面右键

出现菜单，点击 Open using Rescource Hacker。

3.Resource Hacker应用运行之后中，在以下界面中选择Icon，然后在工具栏里面选择Action，Replace
Icon，如下图：

然后选择自己想要替换的.ico文件就好

4.这其实并不够，我们还需要更换exe里面的版本信息，打开Version
Info，把FileDescription和ProductName改成我们自己的项目名称，最好把SquirrelAwareVersion也更改一下，毕竟是版本号。

5.做完这些之后，我们需要按照之前的步骤，在命令行中输入

nuget pack Package.nuspec

重新生成nuget包，然后再使用

squirrel --releasify ..nupkg 命令创建安装文件。

6.打开之后生成的releases文件夹，参考本文种中创建安装程序部分的步骤2-4，对setup.exe进行自定义。

最后，一个可以自动更新又安装便捷，还有我们自己的酷酷的图标跟名字的应用就生成拉！

第一步，配置 package.json 第二步，编译 build --win --ia32 builder 支持编译成多种格式等等功能

前言：研究electron自动更新的时候，在electron的官方文档auto-updater 中，提到了在几个平台mac，linux，windows下electron 的自动更新方法，其中windsow平台上面，文章中建议先用grunt-electron-installer 模块来创建windows安装包，grunt这个工具是由Squirrel集成的。进而了解下Squirrel这个工具，
一个可以用来给electron应用的安装更新卸载添加快捷方式的工具。本文主要提及如何在windows平台下，用Squirrel创建electron的.exe安装包。

创建nuget包

我们的方法是使用nuget工具创建Nuget包，再使用Squirrel工具创建.exe。

1.下载squirrel.exe和nuget.exe，也可以选择直接安装Squirrel.Windows （需要有vitual
studio环境）。

2.新建文件夹如my-build，把下载好的squirrel.exe，nuget.exe和setup.exe

放进去，在文件夹放入我们未打包的electron应用，如下图：

4.在my-build根目录中，打开命令行执行nuget spec

如下图：

生成 spec包初始文件

5.编辑器打开 Package.nuspec，按照自己项目的需要编辑这个文件，如下图：

这里需要注意：根据Squirrel文档说明，target folder 属性需要设置为lib/net45，否则并没有用；<iconUrl>标签用来制定未来的exe的icon。

5.用下面的命令创建一个nuget包，

nuget pack Package.nuspec

如下图：

之后在目录中会出现这个包

命名规则就是<my_app_name>.<version>.nupkg

创建安装程序

把应用程序打包成nuget包之后，就可以用squirrel创建一个安装程序了。在根目录打开命令行，执行以下命令：

squirrel --releasify <my_app_name>.<version>.nupkg

这个时候命令行中没有任何提示。但是别慌，编译一段时间后程序会创建一个release文件夹，里面有三个文件，nuget包，RELEASES 文件和安装文件Setup.exe。如下图：

如果没有出现这三个文件，可以查看目录中的SquirrelSetup.log，根据里面的报错，来进行调试。

注意上面这条squirrel 命令，可以用来设置setup.exe在安装过程中用传统icon还是用自定义的图片文件。使用Squirrel --help可以查看更多帮助

发布应用和安装应用

把上一步生成的setup.exe发送给想要安装这个应用的用户，就可以了。

最终应用会被安装在C:\Users\Administrator\AppData\Local\[appname] 文件夹中，注意Squirrel 的日志文件也存在目录中，调试安装问题的时候非常有用。

双击我们的setup.exe进行安装app的测试，如果中途有任何出错，在

C:\Users\Administrator\AppData\Local\SquirrelTemp 里面可以看到安装日志。如下图：

安装之后打开C:\Users\Administrator\AppData\Local 目录，可以看到app安装在这里，如下图：

自动创建快捷方式

进入我们安装之后的文件夹，命令行进入C:\Users\Administrator\AppData\Local\[your appname]，执行 Update.exe --help ，可以看到

不知道从上图你有没有得到什么提示，反正我发现了，在命令行手动创建快捷方式的命令是Update.exe --createshortcut electron\electron.exe -i [your ico toute]\app.ico

所以，如果我们想让应用在安装过程中静默地创建好快捷方式，那就需要在app的安装之后相反设法执行这句代码。

因为我们的.exe会在安装之后自动打开程序，所以我在程序的入口main.js，添加sqruieel事件的监听就好了。如下图：

我顺便把程序卸载时，删除快捷方式的监听事件也写了进去。还有程序的更新和删除事件监听，但是这两个事件，我还没有进行测试。

更新应用

其实我一直很想做增量更新，在这里我的更新方法有两个，第一是在程序的入口添加js，发送请求到服务器，拉取更改文件进行本地替换，但是如果是node_module依赖包的更改，这个方法并不可行。第二个方法比较安全而且快捷通过发布一个版本号不同的exe，如下：1.在这个创建安装程序的步骤2中，我们把程序代码都复制到了这个文件夹里面，如下图：

如果后续我们的程序要进行更新，首先我们需要把更改的文件直接复制替换到这个文件夹。

2.打开Package.nuspec，编辑version标签

3.参考本文种中创建安装程序部分的步骤2-4，重新生成setup.exe，发布应用。

通过执行setip.exe安装，程序会自动删除之前的应用，但是我并不清楚，sqruieel 是进行了增量替换，还是将之前的整个应用进行删除，再重新安装。

创建自定义安装包

在上一步，我们已经把自己的exe发布出来了，但是如果没有自定义名字跟icon，好像还不够酷，所以我们需要创建自定义的安装文件。

1.下载安装 Resource
Hacker

2.打开这个项目目录，在electron.exe上面右键

出现菜单，点击 Open using Rescource Hacker。

3.Resource Hacker应用运行之后中，在以下界面中选择Icon，然后在工具栏里面选择Action，Replace
Icon，如下图：

然后选择自己想要替换的.ico文件就好

4.这其实并不够，我们还需要更换exe里面的版本信息，打开Version
Info，把FileDescription和ProductName改成我们自己的项目名称，最好把SquirrelAwareVersion也更改一下，毕竟是版本号。

5.做完这些之后，我们需要按照之前的步骤，在命令行中输入

nuget pack Package.nuspec

重新生成nuget包，然后再使用

squirrel --releasify <my_app_name>.<version>.nupkg 命令创建安装文件。

6.打开之后生成的releases文件夹，参考本文种中创建安装程序部分的步骤2-4，对setup.exe进行自定义。

最后，一个可以自动更新又安装便捷，还有我们自己的酷酷的图标跟名字的应用就生成拉！

---

凭祥市18656004155： 如何将electron框架开发的软件包打包成单一exe文件 - ？
潮仲蓉生： 第一步,配置 package.json 第二步,编译 build --win --ia32 builder 支持编译成多种格式等等功能

凭祥市18656004155： 用什么工具开发electron - ？
潮仲蓉生： VisualStudioCode用的是AtomShellatom/electron·GitHub,基于io.js和Chromium,自然DeveloperTools就是Chromium自带的那个喽.

凭祥市18656004155： 如何利用HTML开发桌面程序?有哪些简单的方法? ？
潮仲蓉生： 你说的应该是将HTML程序打包为桌面程序吧,这里介绍一种简单的方式,利用node.js的electron打包,下面我简单介绍一下实现过程,主要内容如下:这里为了更好的说...

凭祥市18656004155： electron怎样与操作系统的原生gui交互 - ？
潮仲蓉生： 时下流行的web app打包工具主要有两个,一个是国内开发者主导的nw.js,另一个是国外大厂支撑的electron.对比了nw.js以及electron之后还是选择了electron,原因主要有以下几点: 1、基于该工具已有广泛被使用的产品,如:atom、vs code等.

凭祥市18656004155： 如何用前端技术开发混合桌面应用软件 - ？
潮仲蓉生： 可以考虑试试electron,或者nwjs,这两个比较出名,可以试试

凭祥市18656004155： 我是学计算机科学与技术专业的,就是我想开发电脑软件和手机软件,要用什么软件来开发exe和APP? - ？
潮仲蓉生： 你可以学习原生开发,也不可以学习h5,然后学习electron,就可以开发app.

凭祥市18656004155： 框架开发需要用到什么软件? - ？
潮仲蓉生： 现在比较常用的是eclipse和myeclipse 常用框架有:struts1,struts2,hibernate,spring,ibatis,Lucene Struts1和2,主要处理的是视图层和控制层,也就是页面表单数据的处理和逻辑控制和交互等 hibernate和ibatis,都是处理实体与数据库之间的关系映射的 spring是管理bean的!Lucene是全文检索的框架!

凭祥市18656004155： windows7可以装macaca吗 - ？
潮仲蓉生： 1、Macaca由Node.js开发,所以需要安装Node.js.https://nodejs.org/en/2、安装Node.js完成. 首先切换切换淘宝源,因为国外资源访问很慢,而且有些资源还无法下载.> npm install -g cnpm --registry=https://registry.npm.taobao.org3、通过淘...

凭祥市18656004155： 如何使用ArcGIS Diagrammer设计空间数据库框架 - ？
潮仲蓉生： 1 打开软甲,新建一个新建一个Diagrammer,使用【File】下面的【New】菜单,新建一个Diagrammer. 2 新建一个Feature Dataset,并更名为道路信息: 多图 3 新建一个point对象,并命名为道路路线,建立一个network,并命名为...

凭祥市18656004155： delphi做插件框架软件开发,该怎么处理 - ？
潮仲蓉生： 一个终极框架是:解释性delphi 一个通用的解释器(客户端)自动从服务器下载 pas/dfm的加密包,在本地解压到内存里直接解释执行 pas/dfm可以通过delphi的免费版进行开发,测试完毕在自动分发(压缩加密)到服务器