ARTICLE · 1272882

教你打出第一个mac版电脑软件 - electron

发布时间：2026-10-29 10:31:16 最近访问：2026-10-29 10:31:17

文章分两部分，先是干货（创建整个工程，然后打出mac软件包），再是讲原理（不感兴趣的可以跳过这部分）

一、工程

1、创建项目

mkdir electron_learnnpm init -ynpm install electron --save-devnpm install electron-builder --save-dev

2、package.json

{  ”name”: ”medical-agent-client”,  ”version”: ”1.0.0”,  ”main”: ”main.js”,  ”scripts”: {    ”start”: ”electron .”,    ”build:win”: ”electron-builder --win”,    ”build:mac”: ”electron-builder --mac”,    ”build:linux”: ”electron-builder --linux”  },  ”devDependencies”: {    ”electron”: ”^latest版本号”,    ”electron-builder”: ”^25.0.0”  },  ”build”: {    ”appId”: ”com.wanwusheng.medagent”,    ”productName”: ”Agent客户端”,    ”files”: [      ”main.js”,      ”index.html”    ],    ”win”: {      ”target”: ”nsis”    },    ”mac”: {      ”target”: ”dmg”    },    ”linux”: {      ”target”: ”AppImage”    }  }}

3、index.html

不创建这个文件，打包出来内容就是空

<!DOCTYPE html>Agent桌面端

4、main.js（主进程）

const { app, BrowserWindow } = require('electron')function createWin(){  const win = new BrowserWindow({width:1000,height:700})  win.loadFile('index.html')}app.whenReady().then(createWin)

5、打包命令

# Windows打包（在windows机器上跑，输出exe安装包到 dist/ 文件夹）npm run build:win# Mac打包（mac环境，输出dmg）npm run build:mac

二、理论

electron是前端桌面框架，是 GitHub 推出的跨平台桌面应用框架（前身叫 Atom Shell），用 HTML / CSS / JS 写桌面软件，一套代码打包出 Windows /macOS/ Linux 安装包

1、核心

Chromium（网页渲染）+Node.js（本地IO、系统能力），同时拥有网页灵活 UI + Node 本地文件 / 进程能力

2、经典知名产品

VS Code、Notion、Discord、Slack、ChatGPT 桌面端、Claude 桌面端、Figma 桌面版、Obsidian 都是 Electron 做的

3、双进程模型

(1)、主进程（Main）

唯一，Node 环境，控制窗口、文件读写、系统弹窗、托盘、自动更新，调用原生 API

(2)、渲染进程（Renderer）

每个窗口一个，就是 Chromium 网页，负责界面；默认隔离，不能直接操作本地文件，靠 IPC 通信和主进程交互

4、高频坑

(1)、跨平台打包限制

Windows 上不能直接打出 mac 安装包，mac 也不能直接打 windows，跨平台打包要用 docker 或者 github actions

(2)、图标

在 build 配置里加 icon: "./icon.ico"（win） / icon: "./icon.icns"（mac），没有图标会是默认 electron 图标

(3)、大体积

electron 打包出来一般 100MB+，如果后续对体积敏感，后面可以换成 Tauri。根源就是：每一个安装包自带一份完整 Chromium + Node，不依赖用户电脑上有没有装浏览器、Node，所以发给别的同事 / 客户，直接点开就能跑

5、Chromium + Node.js

(1)、Chromium

谷歌开源的浏览器内核项目（Chrome 浏览器就是基于 Chromium 改出来的）

负责解析 HTML / CSS / JS、渲染页面、展示 UI、执行前端代码，就是我们平时说的浏览器渲染引擎

在 Electron 里的角色：渲染进程的底座。你写的 index.html、Vue 页面、可视化页面，全部交给 Chromium 来画出来。

(2)、node.js

基于 V8 引擎、可以脱离浏览器，直接在操作系统上跑 JS 的运行时。正常 JS 只能在浏览器里跑；Node.js 让 JS 可以直接操作电脑本地资源

能干啥：文件读写、启动子进程、访问本地磁盘、调用系统接口、发起网络请求、跑 Python 子进程

在 Electron 里的角色：主进程的底座。Electron 的主进程就是一个 Node.js 环境，用来开窗口、管理托盘、读取本地文献文件、调用你的后端脚本。

(3)、Electron（壳子本身）

Electron =把 Chromium + Node.js 打包粘合在一起的一层封装框架，也就是你说的「运行壳子」

它做了最关键一件事：搭了一套 IPC 通信通道，让两边可以对话：

Chromium（渲染进程）：只管界面、展示内容、给用户点按钮（不能直接碰本地文件，安全沙箱隔离）
Node.js（主进程）：拥有系统权限，负责干活（读文件、调用脚本、管理窗口）
IPC：渲染层点一个按钮 → 发消息给主进程 → 主进程用 Node 去执行任务，再把结果传回页面

6、举例

Agent客户端，页面（Chromium 渲染出来）：一个【检索 PubMed】按钮

用户点按钮（Chromium 里的前端代码）
通过 IPC 发消息给主进程
Node.js（主进程）收到消息，调用 Python 脚本跑文献检索、读本地缓存
拿到结果，再通过 IPC 传回页面
Chromium 把文献列表渲染到界面上

7、打包日志

(base) tomdeMacBook-Pro:electron_learn tom$ npm run build:mac> medical-agent-client@1.0.0 build:mac> electron-builder --mac  • electron-builder  version=26.18.0 os=25.5.0  • loaded configuration  file=package.json (”build” field)  • description is missed in the package.json  appPackageFile=/Users/tom/code2/electron_learn/package.json  • author is missed in the package.json  appPackageFile=/Users/tom/code2/electron_learn/package.json  • writing effective config  file=dist/builder-effective-config.yaml  • executing @electron/rebuild  electronVersion=45.1.0 arch=arm64 buildFromSource=false workspaceRoot=/Users/tom/code2/electron_learn projectDir=./ appDir=./  • installing native dependencies  arch=arm64  • completed installing native dependencies  • packaging       platform=darwin arch=arm64 electron=45.1.0 appOutDir=dist/mac-arm64  • downloading     label=electron    [====================================================================================================] 100% | electron  • downloaded electron zip extracted successfully  output=/Users/tom/code2/electron_learn/dist/mac-arm64  • searching for node modules  pm=npm searchDir=/Users/tom/code2/electron_learn  • no node modules found in collection, trying next search directory  pm=npm searchDir=/Users/tom/code2/electron_learn  • searching for node modules  pm=traversal searchDir=/Users/tom/code2/electron_learn  • using manual traversal of node_modules to build dependency tree  • no node modules found in collection, trying next search directory  pm=traversal searchDir=/Users/tom/code2/electron_learn  • no node modules returned while searching directories  searchDirectories=[””]  • default Electron icon is used  reason=application icon is not set  • skipped macOS application code signing  reason=cannot find valid ”Developer ID Application” identity or custom non-Apple code signing certificate, it could cause some undefined behaviour, e.g. macOS localized description not visible, see https://electron.build/code-signing allIdentities=     0 identities found                                                Valid identities only     0 valid identities found  • building        target=DMG arch=arm64 file=dist/Agent客户端-1.0.0-arm64.dmg  • downloading     label=dmgbuild-bundle-arm64-75c8a6c.tar.gz    [====================================================================================================] 100% | dmgbuild-bundle-arm64-75c8a6c.tar.gz  • building block map  blockMapFile=dist/Agent客户端-1.0.0-arm64.dmg.blockmap