3步搞定Electron桌面应用：octokit.js跨平台开发实战指南
项目地址: https://gitcode.com/gh_mirrors/oc/octokit.js 你是否遇到过GitHub API调用复杂、跨平台兼容性差、认证流程繁琐的问题？本文将通过octokit.js（GitHub软件开发工具包，Software Development Kit）和Electron框架，3步实现一个能在Windows、macOS和Linux上运行的GitHub客户端应用，解决这些痛点。读完你将掌握：跨平台API调用、本地存储认证信息、图形界面（Graphical User Interface, GUI）集成的核心技能。
环境准备与项目初始化
安装依赖
首先克隆仓库并安装必要依赖。octokit.js已集成REST API、GraphQL、认证等功能，Electron负责桌面应用框架。
git clone https://gitcode.com/gh_mirrors/oc/octokit.js
cd octokit.js
npm install electron --save-dev
npm install @octokit/core @octokit/rest --save
关键依赖说明：
electron：桌面应用运行时@octokit/rest：GitHub REST API客户端（src/octokit.ts中已集成）@octokit/core：基础API请求框架
项目结构
新建Electron主文件和渲染进程页面：
src/
├── main.js # Electron主进程
├── renderer/
│ ├── index.html # 应用界面
│ └── app.js # 前端逻辑
核心功能实现
1. 认证流程设计
使用个人访问令牌（Personal Access Token）认证，通过Electron的dialog模块获取用户输入，并存储在本地文件系统。
main.js（主进程代码）：
const { app, BrowserWindow, dialog } = require('electron');
const fs = require('fs');
const path = require('path');
const { Octokit } = require('@octokit/rest');
let octokit;
const TOKEN_PATH = path.join(app.getPath('userData'), 'token.json');
// 读取存储的令牌
function loadToken() {
if (fs.existsSync(TOKEN_PATH)) {
const { token } = JSON.parse(fs.readFileSync(TOKEN_PATH, 'utf8'));
octokit = new Octokit({ auth: token });
return true;
}
return false;
}
// 申请新令牌
async function requestToken() {
const { response } = await dialog.showInputBox({
title: 'GitHub认证',
message: '输入个人访问令牌:',
password: true
});
if (response) {
fs.writeFileSync(TOKEN_PATH, JSON.stringify({ token: response }));
octokit = new Octokit({ auth: response });
return true;
}
return false;
}
2. API调用封装
在渲染进程中通过IPC（进程间通信）调用GitHub API。以获取用户仓库列表为例：
renderer/app.js（前端逻辑）：
const { ipcRenderer } = require('electron');
// 获取仓库列表
document.getElementById('load-repos').addEventListener('click', async () => {
const repos = await ipcRenderer.invoke('get-repos');
const list = document.getElementById('repo-list');
repos.forEach(repo => {
const item = document.createElement('div');
item.className = 'repo-item';
item.innerHTML = `
<h3>${repo.name}</h3>
<p>${repo.description || '无描述'}</p>
<small>⭐ ${repo.stargazers_count}</small>
`;
list.appendChild(item);
});
});
main.js（添加IPC处理）：
const { ipcMain } = require('electron');
ipcMain.handle('get-repos', async () => {
const { data } = await octokit.rest.repos.listForAuthenticatedUser({
per_page: 100
});
return data;
});
3. 界面设计
renderer/index.html（简化版）：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>GitHub客户端</title>
<style>
.repo-item { border: 1px solid #eee; padding: 10px; margin: 10px; border-radius: 4px; }
#repo-list { max-width: 800px; margin: 0 auto; }
button { padding: 8px 16px; background: #0366d6; color: white; border: none; border-radius: 4px; cursor: pointer; }
</style>
</head>
<body>
<h1>我的GitHub仓库</h1>
<button id="load-repos">加载仓库</button>
<div id="repo-list"></div>
<script src="app.js"></script>
</body>
</html>
应用打包与优化
打包配置
修改package.json添加打包脚本：
"scripts": {
"start": "electron .",
"package": "electron-builder --dir"
}
安装打包工具：
npm install electron-builder --save-dev
关键优化点
- 令牌安全：使用Electron的安全存储API替代明文文件
- 请求限流：octokit内置节流插件自动处理API速率限制
- 错误处理：捕获并显示API错误，如网络问题或无效令牌
// 添加错误处理示例（main.js）
ipcMain.handle('get-repos', async () => {
try {
const { data } = await octokit.rest.repos.listForAuthenticatedUser({
per_page: 100
});
return data;
} catch (error) {
console.error('API请求失败:', error.message);
throw new Error(`获取仓库失败: ${error.message}`);
}
});
回顾与扩展方向
本文实现了基础GitHub客户端，核心功能包括令牌认证、仓库列表展示和跨平台打包。进一步可扩展：
- 分支管理与提交历史查看
- Issue创建与管理（参考创建Issue API）
- 暗黑模式与主题切换
通过octokit.js的插件系统，可轻松集成GraphQL查询、请求重试等高级功能。完整代码结构可参考项目官方文档。
点赞+收藏+关注，获取更多Electron实战技巧。下期预告：《octokit.js WebHooks实时通知系统》。
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
