应用基础信息:让系统认识你的程序
每个桌面应用都需要向操作系统声明自己是谁,Electron 中这部分信息主要在 package.json 和打包工具的配置中定义。核心字段包括:
name:应用标识符,使用小写字母和连字符,它会作为安装目录、进程名等的基础(例如"name": "my-notes")。productName:用户看到的正式名称,可以包含空格和大写(例如"productName": "My Notes"),它会显示在窗口标题、开始菜单和启动台。description:应用的简短描述,用于安装包的说明。author:作者或公司信息。version:当前版本号,遵循语义化版本规范(如1.0.0)。appId:在electron-builder配置中非常重要,用于唯一标识应用,格式通常为反向域名(例如"appId": "com.mycompany.mynotes")。macOS 靠它来绑定安全权限,Windows 则用它来区分不同应用的注册表项。
一个最小化的 package.json 示例(省略了其他依赖和脚本):
{
"name": "my-notes",
"productName": "My Notes",
"version": "1.0.0",
"description": "A simple desktop note-taking application",
"author": "MyCompany",
"license": "MIT",
"main": "main.js",
"scripts": {
"start": "electron .",
"pack": "electron-builder --dir",
"dist": "electron-builder"
},
"build": {
"appId": "com.mycompany.mynotes",
"productName": "My Notes",
"directories": {
"output": "release"
}
}
}
这些字段不仅要写在 package.json 里,还需要在打包配置(build 字段)中再次确认,因为打包工具可能会用这里的值覆盖默认值。实际开发中,保持两处一致能避免很多奇奇怪怪的问题。
图标:给应用一张脸
图标是用户识别你的应用的第一视觉元素,Electron 在不同平台需要不同格式的图标文件:
- Windows:需要
.ico格式,通常包含多种尺寸(16、32、48、256 像素)以适配不同场景。 - macOS:需要
.icns格式,内含从 16×16 到 512×512 甚至 1024×1024 的尺寸。 - Linux:普遍使用
.png,通常要求 512×512 像素。
你可以用专门的工具(如 Photoshop、GIMP)自行制作,但更高效的方法是用一张高质量的 1024×1024 的 PNG 原图,然后借助自动转换工具生成所有需要的格式。推荐使用 electron-icon-builder,它可以一键生成所有平台的图标。
安装工具并生成图标:
npm install --save-dev electron-icon-builder
npx electron-icon-builder --input=./icon.png --output=./build
运行后会在 ./build 目录下得到 icons 文件夹,里面按平台分类存放好了 .ico、.icns 和对应尺寸的 .png。这些文件就可以直接用于打包配置。
如果你不想安装额外工具,也可以使用在线服务(如 convertio)手动转换,但自动化显然更适合持续集成。
在 electron-builder 中指定图标路径很简单,只需在 build 配置中添加 icon 字段(一般指向包含各平台图标的文件夹):
"build": {
"appId": "com.mycompany.mynotes",
"productName": "My Notes",
"directories": {
"output": "release"
},
"icon": "build/icons/icon.ico",
"mac": {
"icon": "build/icons/icon.icns"
},
"linux": {
"icon": "build/icons/512x512.png"
}
}
注意,在不同的打包配置段中指定不同的图标格式,可以避免平台不兼容问题。当你的应用在桌面显示时,使用的就是这些图标;在程序坞、任务栏、系统托盘等位置也是一样。
安装包格式:选择适合的分发方式
Electron 打包工具支持生成多种安装包格式,你需要根据目标用户的操作系统选择合适的类型:
Windows 平台
| 格式 | 说明 |
|------|------|
| NSIS(.exe) | 最传统的 Windows 安装程序,支持向导式安装、自定义安装路径、创建桌面快捷方式。绝大多数 Electron 应用(如 VS Code、Slack)都用这种格式。 |
| Portable(便携版) | 一个自解压的 .exe 文件,双击即可运行,不写注册表,适合无需安装的轻量工具。 |
| AppX(UWP) | 微软商店格式,需要额外的证书和配置,主要用于需要通过商店分发的场景。 |
| MSI | 企业批量部署常用的静默安装格式,支持组策略分发。 |
对于普通应用,推荐使用 NSIS,它是 electron-builder 的默认 Windows 格式,零配置即可生成。如果想提升安装体验,可以在 build 中配置 NSIS 的自定义选项:
"nsis": {
"oneClick": false,
"allowToChangeInstallationDirectory": true,
"createDesktopShortcut": true
}
macOS 平台
| 格式 | 说明 |
|------|------|
| DMG(.dmg) | 最常见,用户双击挂载后,将 .app 拖入“应用程序”文件夹。 |
| MAS | 提交到 Mac App Store 的专用包,要求代码签名和沙盒权限,审核流程严格。 |
| PKG | 安装器包,通常用于需要写入系统级文件的复杂安装。 |
绝大多数 Electron 应用默认使用 DMG 分发,简单可靠。你可以在 build.mac 中配置:
"mac": {
"target": "dmg",
"artifactName": "${productName}-${version}-mac.${ext}"
}
Linux 平台
| 格式 | 说明 |
|------|------|
| AppImage | 一个独立可执行文件,下载下来直接运行,跨发行版兼容性最好,推荐给用户使用。 |
| deb | Debian/Ubuntu 系列的安装包,用户可以双击安装或通过 dpkg 管理。 |
| rpm | Fedora/Red Hat/CentOS 系列使用的包格式。 |
| Snap | Canonical 推动的沙盒包格式,集成自动更新,但有一定体积和权限限制。 |
一般选择 AppImage 和 deb 就能覆盖绝大多数 Linux 用户,配置方法如下:
"linux": {
"target": ["AppImage", "deb"],
"category": "Utility"
}
自动化与多平台构建
一个真实的项目几乎不会手动为每个平台分别打包,而是在 CI/CD 中配置多平台构建。比如 GitHub Actions 可以同时运行 Windows、macOS、Ubuntu 三个环境,分别执行 npm run dist,然后收集各自生成的安装包。一条流水线下来,你的 release 目录里就会整齐地躺着 My Notes-1.0.0-win.exe、My Notes-1.0.0-mac.dmg 和 My Notes-1.0.0-linux.AppImage 等文件。
在配置构建脚本时,要注意限制每个平台只生成自己的目标,避免在 macOS 上尝试生成 Windows 包(虽然也可以跨平台打包,但需要额外配置 Wine 等工具,过程繁琐且容易出错)。通常直接使用 GitHub Actions 的矩阵策略,干净利落。
处理好这三个环节,你的 Electron 应用就从一堆代码变成了一个身份完整、图标精美、可以直接分发给用户的桌面程序。这些细节虽然不如业务功能那么显眼,但它们直接决定了用户安装和启动时的第一印象,值得花一点时间打磨。