使用 electron-updater 自動更新應用

前端工程師可使用 Electron 很是方便的編寫出 PC 端應用，而應用更新的方式也有不少，詳細可見更新應用程序。

個人項目是基於 electron-vue 搭建的，構建打包生成安裝包，則用的是 electron-builder，因此更新天然選擇 electron-updater。

1. 要實現自動更新，首先須要安裝 electron-updater 包：

yarn add electron-updater@3.1.5 -D
複製代碼

這裏有個坑，若是你跟我同樣使用的 electron-vue 搭建的項目，那 electron 的版本應該也是 2.x，截止到 2018-12-16，electron-vue 使用的依然是 "electron": "^2.0.4"，若是你直接安裝最新的 electron-updater，那你的更新程序是會報錯的。

因此這裏有兩個方案，一個是升級你的 electron，還有一個是安裝 3.x 的 electron-updater。

2. 而後對 package.json 作一點小改動：

...
  "build": {
    "productName": "xingsanhao",
    "appId": "com.example.yourapp",
    "directories": {
      "output": "build"
    },
    "publish": [
      {
        "provider": "generic",
        "url": "http://10.0.1.42:88/"
      }
    ],
    "files": [
      "dist/electron/**/*"
    ],
    ...
複製代碼

build 裏的內容是 electron-builder 打包須要的配置，如今咱們須要在裏面加入 electron-updater 須要的配置 publish， 我這裏選用的是普通服務器，固然你也可使用 GitHub 等進行免費託管，詳細參考文檔。

3. 建立文件服,測試環境能夠直接用 express 快速搭建：

// app.js

var express = require('express')
var fs = require('fs')
const path = require('path')
var app = express()

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

var server = app.listen(88, function () {
  var host = server.address().address;
  var port = server.address().port;

  console.log('Example app listening at http://%s:%s', host, port);
});
複製代碼

打包生成的安裝包和 latest.yml 文件就放在 client 這個文件夾裏，這樣咱們就能夠經過 http://10.0.1.42:88/latest.yml 訪問到 latest.yml 這個文件。

因此在 package.json 裏的配置中，publish 下的 url 項就直接寫 http://10.0.1.42:88/ 就行。

4. 最後，檢查更新的代碼

代碼我就不寫了，百度和文檔裏都有，這個比較簡單，你想要自動檢查更新仍是用戶手動檢查更新，都看你心情。