上一篇介绍了Electron的一些基础知识，入门Electron，手把手教你写出一个完整的实战案例。下面继续介绍Electron的打包和自动更新。在打包应用程序之前，需要为应用程序准备一个图标作为安装包图标。不同的操作系统需要不同的图标格式。Mac对应的格式是icns，Windows对应的格式是ico。可以使用electron-icon-builder生成图标。首先准备一张1024*1024的png图片，将图片放在工程文件夹中，我们这里选择放在tasky/public文件夹中。安装electron-icon-builder:npmielectron-icon-builder--D在package.json的scripts中添加说明:"build-icon":"electron-icon-builder--input=./public/icon.png--output=build--flatten"运行npmrunbuild-icon，会在build文件夹中生成打包所需的一系列图标文件。Electron生态系统中有两种常用的打包工具：electron-builder和electron-packager。electron-builder配置更灵活，应用更广泛。接下来我们使用electron-builder进行打包。安装npmielectron-builder--Dconfiguration使用electron-builder主要打包各种配置，支持两种配置方式：在package.json中添加build字段："build":{"appId":"your.app.id"}指定写入配置项的配置文件。默认为项目根目录下的electron-builder.yml。appId:"your.app.id"在日常开发中，比较常用的是package.json的配置方式，我们主要使用这种方式。基本配置"build":{"appId":"this.is.tasky","productName":"Tasky","copyright":"Copyright?2021Alaso","directories":{"buildResources":"build",//指定打包需要的静态资源，默认是build"output":"dist",//打包生成的目录，默认是dist}}，build文件夹放，electron-builder在打包过程默认需要的静态文件，比如我们上面生成的图标文件；dist文件夹包含打包生成的各种文件。在package.json的脚本中添加命令："pack":"electron-builder"运行npmrunpack根据以上配置，electron-builder会根据当前操作系统打包默认文件。例如windows平台下，打包结果如下：平台相关配置electron-builder会自动识别当前操作系统，并打印出该系统对应的安装包。这也就意味着，如果要生成exe\msi，需要在Windows操作系统上，如果是dmg，则需要在Mac操作系统上。在electron-builder的配置选项中，有很多与操作系统相关的配置，可以对不同平台的打包做一些定制化的效果。下面以Windows和Mac为例，介绍一些常用的平台相关配置。Windows"build":{..."win":{"target":["msi","nsis"],//安装包的格式，默认为"nsis""icon":"build/icons/icon.ico"//安装包的图标},//"target"值"nsis"为打包后的exe文件//nsis为windows系统安装包的制作程序，提供如下功能安装、卸载和系统设置//关于"nsis"的一些配置"nsis":{"oneClick":false,//是否一键安装，默认为true"language":"2052",//安装语言,2052对应中文"perMachine":true,//为当前系统所有用户安装应用"allowToChangeInstallationDirectory":true//允许用户选择安装目录}}Mac..."build":{"mac":{"target":["dmg","zip"],//安装包的格式，默认为"dmg"和"zip""category":"public.app-category.utilities"//应用程序安装在哪个类别，哪些类别可以在苹果官网查找},"dmg":{"background":"build/background.jfif",//安装窗口背景图片"icon":"build/icons/icon.icns",//安装图标"iconSize":100,//图标大小"contents":[//在坐标中安装图标安装窗口中的信息{"x":380,"y":180,"type":"link","path":"/Applications"},{"x":130,"y":180,"type":"file"}],"window":{//安装窗口的大小"width":540,"height":380}}}哪些文件会被打包到安装包生成的文件夹中，会有一个app.asar，它是Electron应用的主要业务文件压缩包，要知道项目中有哪些文件被打包到安装包中，可以通过解压app.asar查看。解压app.asar，需要asar工具，首先安装：npmiasar-g，然后切换到app.asar所在目录，执行：asarextractapp.asar./app-folder。以windows为例，app.asar位于tasky\dist\win-unpacked\resources目录下。解压后可以看到app-文件夹中的内容如下：可以看到基本上就是项目的所有文件（除了package-lock.json\.gitignore\build文件夹），还有node_modules。对于node_modules，并不是node_modules中的所有内容都会被打包到安装包中，只会打包package.json中dependencies字段中的依赖，devDependencies字段中的依赖不会。这是唯一的规则，与项目是否实际使用依赖关系无关。因此，为了减小安装包的大小，建议将渲染过程中用到的所有外部包都安装在devDependencies中，然后使用webpack将外部包的代码和业务代码打包在一起，这样会在后面的文章中详细介绍。当然你可以通过配置files字段来指定打包哪些内容。比如我们只打包src文件夹，index.js和package.json，可以这样配置："build":{"files":["package.json","index.js","src/**/*"]}自动更新要自动更新，应用程序的安装包应存储在互联网上的服务器上。每次打开应用，都会根据当前应用的版本和在线版本自动检测匹配。当发现有新版本时，会自动下载。下载完成后，会询问用户是否安装新版本。打包不同版本在package.json中，有一个“version”字段，用来判断当前的版本。step1:set"version":"1.0.0",runnpmrunpackstep2:set"version":"1.0.1",runnpmrunpack虽然，我们没有更改应用程序的内容，但是它会被识别作为“1.0.0”和“1.0.1”版本。搭建服务器存放安装包我们在本地启动一个服务器，存放最新版本的安装包资源。1.初始化mkdirtasky-servercdtasky-servernpminit-ynpminstallkoakoa-static--save2.在tasky-server目录下创建index.js，内容如下：constkoa=require('koa')constapp=newKoa()conststatic=require('koa-static')constpath=require('path')app.use(static(path.join(__dirname,'./static')));app.listen(9005)3、建立静态文件夹，放最新版本的安装包集。包括哪些文件？假设最新版本是“1.0.1”。Mac平台：latest-mac.yml、Tasky-1.0.1-mac.zip、Tasky-1.0.1.dmg、Tasky-1.0.1.dmg.blockmapWindows平台：latest.yml、Tasky1.0.1.msi、TaskySetup1.0.1.exe，TaskySetup1.0.1.exe.blockmap4，启动服务器。nodeindex.jsdetectionupdate检测更新可以借助electron-updater实现。它结合了electron-builder，实现起来非常简单。直接上代码。第一步是在构建中配置“publish”字段："build":{..."publish":[{"provider":"generic","url":"http://127.0.0.1:9005/"}]}第二步是在应用的主进程中调用electron-updater模块检测更新。const{autoUpdater}=require('electron-updater')functioncheckUpdate(){if(process.platform=='darwin'){//我们使用koa-static将静态目录设置为静态文件夹，//so访问http://127.0.0.1:9005/darwin相当于访问static/darwin文件夹，win32和autoUpdater.setFeedURL('http://127.0.0.1:9005/darwin')//设置为detectUpdatepath}else{autoUpdater.setFeedURL('http://127.0.0.1:9005/win32')}//检测更新autoUpdater.checkForUpdates()//监听'error'事件autoUpdater.on('error',(err)=>{console.log(err)})//监听'update-available'事件并触发autoUpdater.on('update-available',()=>{console.log('foundnewversion')})//默认会自动下载新版本。如果不想自动下载，设置autoUpdater.autoDownload=false//监听'update-downloaded'事件，当下载新版本时触发autoUpdater.on('update-downloaded'',()=>{dialog.showMessageBox({type:'info',title:'Appupdate',message:'新版本找到，更新？',buttons:['Yes','No']}).then((buttonIndex)=>{if(buttonIndex.response==0){//选择是，退出程序并安装新版本autoUpdater.quitAndInstall()app.quit()}})})}app.on('ready',()=>{//每次启动程序，检查更新checkUpdate()}判断是否需要更新的依据是什么？electron-updater会指定路径根据上面setFeedURL下面latest.yml中的版本来判断是否需要更新，如果版本大于当前版本，则需要更新，否则不更新yml也是一个配置文件，有点类似于我们常用的.json配置文件，两者写法不同。。基于github的解决方案如果不想自己搭建服务器，也可以使用github。使用github自动发布，不用每次手动上传最新的安装包资源，自动发布第一步还是配置publish字段，"build":{..."publish":['github']}第二步，在“scripts”中配置新的指令，由于github权限控制，需要GH_TOKEN，可以在https://github.com/settings/t找到...在“scripts”中生成GH_TOKEN：{..."release":"cross-envGH_TOKEN=ghp_KmVD3......W2k3Pd4vVelectron-builder"}第三步，npmrunrelease，会在打包后上传资源到github，生成release草稿。你可以在github项目中找到草稿并发布release。检查更新与上述类似。以Windows为例，代码如下。const{autoUpdater}=require('electron-updater')functioncheckUpdate(){//检查更新autoUpdater.checkForUpdates()//监听'error'事件autoUpdater.on('error',(err)=>{console.log(err)})//监听'update-available'事件并触发autoUpdater.on('update-available',()=>{console.log('foundnewversion')})//默认情况下将自动下载新版本。如果不想自动下载，设置autoUpdater.autoDownload=false//监听'update-downloaded'事件，触发autoUpdater.on('update-downloaded',()=>{dialog.showMessageBox({type:'info',title:'Appupdate',message:'Newversionfound,update?',buttons:['Yes','No']}).then((buttonIndex)=>{if(buttonIndex.response==0){//如果选择是，退出程序并安装新版本autoUpdater.quitAndInstall()app.quit()}})})}app.on('ready',()=>{//每次启动程序，检查更新checkUpdate()}结论在我们上面的例子中，页面的所有web资源都被打包到安装包中，另一种情况是web资源和“appshell”分离，web资源放在服务器上，每次通过网络动态加载，如下：mainWindow.loadURL('https://juejin.cn')在业务需要经常更新的场景下，可以使用该方法快速实现无障碍更新这种情况下，我们可以按照上面的方法对“壳”进行打包更新，这与主进程相关；而页面资源的打包和普通前端项目一样，这里不再赘述。本文主要讲解使用electron-builder打包应用和自动更新。在下一篇文章中，我们将探索Electron和Vue的结合使用。感谢您的阅读，如果您觉得还不错，请点个赞????！更多技术交流，请关注我的公众号：Alasolala
