我用electron写了一个命令管理软件

背景

在日常开发中，我们经常需要使用各种命令，如 Git、Linux、Docker 等。这些命令繁多且难以记忆，为了提高效率，我决定开发一个应用来帮助自己记忆和快速使用这些命令。正好最近在学习 Electron，于是将其作为一个练手项目。

效果

实现

技术栈

• Electron + React + Umi：利用 Electron 框架结合 React 和 Umi，构建一个跨平台的桌面应用。

存储方式

• 文件存储：使用 Node.js 的 fs 模块进行数据的读写操作，将命令数据存储在本地文件中。

核心代码

const { contextBridge, clipboard } = require('electron');
const fs = require('fs');

contextBridge.exposeInMainWorld('electronAPI', {
  readDataFile: () => {
    return new Promise((resolve, reject) => {
      fs.readFile('./data.json', 'utf8', (err, data) => {
        if (err) reject(err);
        else resolve(data);
      });
    });
  },
  writeDataFile: (data) => {
    return new Promise((resolve, reject) => {
      fs.writeFile('./data.json', data, (err) => {
        if (err) reject(err);
        else resolve();
      });
    });
  },
  copyToClipboard: (text) => {
    clipboard.writeText(text);
  }
});

踩坑

下载electron问题

# 将pnpm变成扁平化架构，pnpm专用
node-linker=hoisted
# 设置阿里仓库源
registry="https://registry.npmmirror.com"
# 在国内使用pnpm安装electron需要配置一下electron的下载路径
ELECTRON_MIRROR="https://npmmirror.com/mirrors/electron/"

下载后不能用

在node_modules中electron下执行npm install

打包失败问题

files需要包含对应的文件

  "build": {
    "appId": "com.dc.command.manager",
    "productName": "D-Command",
    "mac": {
      "target": "dmg"
    },
    "directories": {
      "output": "dist"
    },
    "extends": null,
    "files": [
      "main.js",
      "preload.js",
      "package.json",
      "node_modules/**/*",
      "build/**/*"
    ]
  },

electron-builder打包失败Application entry file “build/electron.js“

在使用react-cra时会把入口（main.js）给改了，在package.json的build下将extends改成null即可解决问题

打包后加载不到页面

手动加上./

GitHub 仓库地址

electron-command

TODO

• 删除：支持删除不再需要的命令。
• 收藏：允许用户收藏常用命令。
• 分类：对命令进行分类管理，便于查找和使用。
• 应用中，支持终端：在应用中直接执行命令，支持终端操作。

---