Electron 项目实战 02：打包和自动更新

技术选型

electron-forge
electron-builder

electron-forge 是Electron 官方文档介绍的，打包和发布都包含了，但是包含的坑也非常多。electron-builder下载量和集成打包非常顺利，本教程也是采用electron-buid来介绍打包。大家在技术选型的时候要多找几个，原则：选下载量高、社区活跃度高、问题少的技术，这样可以让你少走很多弯路。

由于我没有mac os 环境，就只介绍windows 环境打包和更新，按文档添加对应配置应该问题不大。

安装依赖

yarn add electron-builder -D

添加打包配置

package.json

{
  "name": "my-electron-app",
  "version": "0.0.1",
  "main": "main.js",
  "author": "Potter<aa4790139@gmail.com>",
  "license": "MIT",
  "scripts": {
    "dev": "electron .",
    "publish": "electron-builder --win -p always"
  },
  "build": {
    "appId": "com.my.electron.app",
    "productName": "my-electron-app",
    "publish": [
      {
        "provider": "github",
        "owner": "yxw007",
        "repo": "electron_app"
      }
    ],
    "win": {
      "target": "nsis"
    },
    "directories": {
      "output": "build"
    },
    "nsis": {
      "oneClick": false,
      "allowToChangeInstallationDirectory": true
    }
  },
  "devDependencies": {
    "electron": "^28.0.0",
    "electron-builder": "^24.9.1"
  },
}

打包

npm run publish

打包后会自动发布至github对应仓库，Release页会自动生成一个Draft，需要手动发布才能成为正式版本

Untitled 1.png

集成自动更新

安装依赖
```
yarn add electron-updater electron-log
```

index.html，添加一个更新标签来显示我们的更新信息

<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8" />
	<!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
	<meta http-equiv="Content-Security-Policy"
				content="default-src 'self'; script-src 'self'" />
	<meta http-equiv="X-Content-Security-Policy"
				content="default-src 'self'; script-src 'self'" />
	<title>Electron App</title>
</head>

<body>
	<div>Electron App</div>
	Current version: <span id="version">vX.Y.Z</span>
	<p id="info"></p>
	<div id="message"></div>
</body>
<script src="./renderer.js"></script>

</html>

main.js 添加自动相关代码

const { app, BrowserWindow, ipcMain } = require("electron");
const path = require("node:path");
//1.添加日志显示，方便问题排查
const log = require("electron-log");
const { autoUpdater } = require("electron-updater");

autoUpdater.logger = log;
autoUpdater.logger.transports.file.level = "info";
log.info("App starting...");

let win;
const createWindow = () => {
	win = new BrowserWindow({
		width: 800,
		height: 600,
		webPreferences: {
			preload: path.join(__dirname, "preload.js"),
		},
	});

	// win.loadFile("index.html");
	win.loadURL(`file://${__dirname}/index.html#v${app.getVersion()}`);
};

function sendStatusToWindow(text) {
	log.info(text);
	win.webContents.send("message", { message: text });
}
//! autoUpdater 监听相关的常用事件
autoUpdater.on("checking-for-update", () => {
	sendStatusToWindow("Checking for update...");
});
autoUpdater.on("update-available", (info) => {
	sendStatusToWindow("Update available.");
});
autoUpdater.on("update-not-available", (info) => {
	sendStatusToWindow("Update not available.");
});
autoUpdater.on("error", (err) => {
	sendStatusToWindow("Error in auto-updater. " + err);
});
autoUpdater.on("download-progress", (progressObj) => {
	let log_message = "Download speed: " + progressObj.bytesPerSecond;
	log_message = log_message + " - Downloaded " + progressObj.percent + "%";
	log_message =
		log_message +
		" (" +
		progressObj.transferred +
		"/" +
		progressObj.total +
		")";
	sendStatusToWindow(log_message);
});
autoUpdater.on("update-downloaded", (info) => {
	sendStatusToWindow("Update downloaded");
	//! 下载完后立即更新
	autoUpdater.quitAndInstall();
});

app.whenReady().then(() => {
	//! 主进程，处理渲染进程的消息
	ipcMain.handle("ping", () => {
		return `I'm ipcMain`;
	});

	// ! 1.监听来自渲染进程的消息
	ipcMain.on("message-from-renderer", (event, arg) => {
		console.log("Renderer Process Message:", arg);

		//! 2.发送回复消息到渲染进程
		event.sender.send("message-from-main", "Hello from main process!");
	});

	createWindow();
	console.log(process.platform);
	app.on("activate", () => {
		if (BrowserWindow.getAllWindows().length === 0) {
			createWindow();
		}
	});
});

app.whenReady().then(() => {
  //! app ready 自动检查更新
	autoUpdater.checkForUpdatesAndNotify();
	console.log("app ready: checkForUpdatesAndNotify");
});

app.on("window-all-closed", () => {
	if (process.platform !== "darwin") {
		console.log("quit");
		app.quit();
	}
});

重新发布版本

npm run publish

此时github 对应仓库Release 页面又会多一个Draft版本，点击修改让其发布，然后更新package.json 中的版本号，再重新发布一次。

为了让你看到这个过程，你可以先下载我演示的my-electron-app-Setup-0.1.4.exe，安装完后打开会检测自动更新，安装完后再打开就会看到更新至v0.1.5

Untitled 2.png

Untitled 3.png

总结

技术选型时尽量多选几个，选择下载量高、社区活跃高(发包更新频率、bug修复数量、bug修复速度综合对比下)的技术，可以让你少踩坑

补充

说明：如果更新出错，可以到C:\Users\Administrator\AppData\Roaming\xxx\logs 目录下查看main.log 日志查看具体问题

完整：demo

参考文献

https://github.com/yxw007/electron-updater-example
https://www.electron.build/

家人们，我最近花了2个多月开源了一个文章发布助手artipub，可以帮你一键将markdown发布至多平台（发布和更新），方便大家更好的传播知识和分享你的经验。
目前已支持平台：个人博客、Medium、Dev.to（未来会支持更多平台）
官网地址：https://artipub.github.io/artipub/
仓库地址：https://github.com/artipub/artipub

目前库已可以正常使用，欢迎大家体验、如果你有任何问题和建议都可以提Issue给我反馈。
如果你感兴趣，特别欢迎你的加入，让我们一起完善好这个工具。
帮忙点个star⭐，让更多人知道这个工具，感谢大家🙏