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

技术选型

electron-forge
electron-builder

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

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

安装依赖

jsx 复制代码

yarn add electron-builder -D

添加打包配置

package.json

jsx 复制代码

{
  "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"
  },
}

打包

bash 复制代码

npm run publish

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

集成自动更新

安装依赖
bash 复制代码
```
yarn add electron-updater electron-log
```

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

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 添加自动相关代码

jsx 复制代码

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();
	}
});