如何搭建Electron开发环境

2025-05-10 05:40:24
推荐回答(1个)
回答(1):

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。

下载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事件的监听就好了。