网站内容自动更新(electron的一些基础知识，教你编写完整实用实用案例)

　　网站内容自动更新(electron的一些基础知识，教你编写完整实用实用案例)

　　在上一篇文章中，我们介绍了Electron的一些基础知识，Electron入门，教大家如何写出完整的实战案例。这里我们将继续介绍基于这个项目的 Electron 的打包和自动更新。

　　生成图标

　　在打包应用程序之前，为应用程序准备一个图标作为安装包图标。不同操作系统需要的图标格式不同，Mac对应的格式是icns，Windows对应的格式是ico。

　　图标生成可以使用电子图标*敏*感*词*。

　　

　　

　　打包应用

　　Electron 生态中有两种常用的打包工具：electron-builder 和electron-packager。

　　电子*敏*感*词*配置更灵活，应用更广泛。接下来我们使用electron-builder进行打包。

　　安装

　　npm i electron-builder --D

复制代码

　　配置

　　用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 © 2021 Alaso",

"directories": {

"buildResources": "build", //指定打包需要的静态资源，默认是build

"output": "dist", //打包生成的目录，默认是dist

}

},

复制代码

　　build文件夹默认放置的是electron-builder在打包过程中需要的静态文件，比如我们上面生成的图标文件；dist 文件夹放置了打包生成的各种文件。

　　在 package.json 的脚本中添加命令： "pack": "electron-builder" 运行 npm run pack

　　基于以上配置，electron-builder 会根据当前操作系统打包默认文件。比如windows平台下，打包结果如下：

　　

　　平台相关配置

　　电子*敏*感*词*会自动识别当前操作系统并打印出与该系统对应的安装包。这也意味着，如果要生成exe\msi，则需要在Windows操作系统下，如果是dmg，则需要在Mac操作系统下。

　　在electron-builder的配置选项中，有很多操作系统相关的配置，可以针对不同平台的打包进行定制。下面以Windows和Mac为例，介绍一些常见的平台相关配置。

　　视窗

　　"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 //允许用户选择安装目录

}

}

复制代码

　　

　　2. 苹果机

　　...

"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

}

}

}

复制代码

　　

　　

　　哪些文件会被打包进安装包

　　在package生成的文件夹中，会有一个app.asar，是Electron应用的主要业务文件压缩包。要知道项目中的哪些文件被打包进了安装包，可以通过解压app.asar查看。

　　解压app.asar，需要使用asar工具，首先安装：npm i asar -g。

　　然后切换到app.asar所在目录，执行：asar extract app.asar ./app-folder。

　　以windows为例，app.asar位于tasky\dist\win-unpacked\resources目录下。解压后可以看到app-folder中的内容如下：

　　

　　可以看到，基本上项目的所有文件（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”字段，用于确定当前版本。

　　虽然我们没有改变应用程序的内容，但是会被识别为“1.0.0”和“1.0.1”两个版本。

　　搭建服务器，放安装包

　　我们在本地启动一个服务器，放上最新版本的安装包资源。

　　mkdir tasky-server

cd tasky-server

npm init -y

npm install koa koa-static --save

复制代码

　　const Koa = require('koa')

const app = new Koa()

const static = require('koa-static')

const path = require('path')

app.use(static(path.join(__dirname,'./static')));

app.listen(9005)

复制代码

　　Mac平台：latest-mac.yml、Tasky-1.0.1-mac.zip、Tasky-1.0.1.dmg、Tasky-1.0.1.dmg.blockmap

　　Windows 平台：latest.yml、Tasky 1.0.1.msi、Tasky Setup 1.0.1.exe、Tasky Setup 1.@ >0.1.exe.blockmap

　　

　　检查更新

　　检测更新可以在电子更新器的帮助下实现。它结合电子*敏*感*词*，实现起来非常简单。直接上代码。

　　第二步是调用应用主进程中的electron-updater模块进行检测和更新。

　　const { autoUpdater } = require('electron-updater')

function checkUpdate(){

if(process.platform == 'darwin'){

//我们使用koa-static将静态目录设置成了static文件夹，

//所以访问http://127.0.0.1:9005/darwin，就相当于访问了static/darwin文件夹，win32同理

autoUpdater.setFeedURL('http://127.0.0.1:9005/darwin') //设置要检测更新的路径

}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('found new version')

})

//默认会自动下载新版本，如果不想自动下载，设置autoUpdater.autoDownload = false

//*敏*感*词*'update-downloaded'事件，新版本下载完成时触发

autoUpdater.on('update-downloaded', () => {

dialog.showMessageBox({

type: 'info',

title: '应用更新',

message: '发现新版本，是否更新？',

buttons: ['是', '否']

}).then((buttonIndex) => {

if(buttonIndex.response == 0) { //选择是，则退出程序，安装新版本

autoUpdater.quitAndInstall()

app.quit()

}

})

})

}

app.on('ready', () => {

//每次启动程序，就检查更新

checkUpdate()

}

复制代码

　　

　　判断是否需要更新的依据是什么？

　　electron-updater 会根据上面setFeedURL 指定的路径下的latest.yml 中的版本来判断是否需要更新。如果版本大于当前版本，则需要更新，否则不会更新。.yml也是一种配置文件，有点类似于我们常用的.json配置文件，写法不同。

　　

　　基于 Github 的解决方案

　　如果不想搭建自己的服务器，也可以使用github。使用github自动发布，无需每次手动上传最新的安装包资源。

　　自动释放

　　第一步是配置“发布”字段。

　　"build": {

...

"publish": ['github']

}

复制代码

　　第二步是在“脚本”中配置新指令。由于github权限控制，需要GH_TOKEN，GH_TOKEN可以在/settings/to...

　　"scripts": {

...

"release": "cross-env GH_TOKEN=ghp_KmVD3.......W2k3Pd4vV electron-builder"

}

复制代码

　　第三步，npm run release，将打包后的资源上传到github，并生成发布稿。您可以在 github 项目中找到此草稿并发布版本。

　　

　　

　　检查更新

　　与上面类似，以Windows为例，代码如下。

　　const { autoUpdater } = require('electron-updater')

function checkUpdate(){

//检测更新

autoUpdater.checkForUpdates()

//*敏*感*词*'error'事件

autoUpdater.on('error', (err) => {

console.log(err)

})

//*敏*感*词*'update-available'事件，发现有新版本时触发

autoUpdater.on('update-available', () => {

console.log('found new version')

})

//默认会自动下载新版本，如果不想自动下载，设置autoUpdater.autoDownload = false

//*敏*感*词*'update-downloaded'事件，新版本下载完成时触发

autoUpdater.on('update-downloaded', () => {

dialog.showMessageBox({

type: 'info',

title: '应用更新',

message: '发现新版本，是否更新？',

buttons: ['是', '否']

}).then((buttonIndex) => {

if(buttonIndex.response == 0) { //选择是，则退出程序，安装新版本

autoUpdater.quitAndInstall()

app.quit()

}

})

})

}

app.on('ready', () => {

//每次启动程序，就检查更新

checkUpdate()

}

复制代码

　　结束语

　　在我们上面的例子中，页面的web资源被打包到安装包中。另一种情况是web资源与“app shell”分离，web资源放在服务器上，每次都通过网络动态加载，如下图：

　　mainWindow.loadURL('https://juejin.cn')

复制代码

　　在业务需要频繁更新的场景下，可以通过这种方式快速无障碍地实现更新。在这种情况下，我们可以通过上述方式对“shell”进行打包和更新，这与主进程有关；并且页面资源的打包和普通前端项目的打包是一样的，这里不再赘述。

　　本文文章主要讲解使用electron-builder打包应用和自动更新。在下一篇文章中，我们将讨论Electron和Vue的结合使用。

　　感谢阅读，如果觉得还不错，请点个赞❤️❤️！