你真的会用Github吗？Electron自动打包攻略
前言相信很多web前端开发的小伙伴和我一样，在想到要开发桌面端应用的时候会第一时间想到用Electron来开发。它可以让我们使用熟悉的HTML+JS+CSS来开发桌面应用。只需要一套代码，你的应用就可以轻松的运行在Windows，macOS，Linux三大操作系统上。但是过去开发Electron应用的时候想要编译出三大系统的应用程序安装包就有点麻烦了，你需要分别在三个操作系统上执行编译命令才能编译出对应系统的安装包。在不知道本文的方法之前，开发的过程是很开心的，但编译的过程提前运行你的Windows系统虚
相信很多web前端开发的小伙伴和我一样，在想到要开发桌面端应用的时候会第一时间想到用Electron来开发。它可以让我们使用熟悉的HTML+JS+CSS来开发桌面应用。只需要一套代码，你的应用就可以轻松的运行在Windows，macOS，Linux三大操作系统上。
但是过去开发Electron应用的时候想要编译出三大系统的应用程序安装包就有点麻烦了，你需要分别在三个操作系统上执行编译命令才能编译出对应系统的安装包。
在不知道本文的方法之前，开发的过程是很开心的，但编译的过程
提前运行你的Windows系统虚拟机或使用Windows系统电脑使用虚拟机通过共享目录访问项目目录或重新clone项目运行npm install安装项目开发环境必备的依赖包运行编译命令编译时会下载对应操作系统的依赖复制你的编译结果去发布应用程序吧让人痛苦...
当然，1-3只需要在对应的操作系统上设置好一次就行。不过，当你的操作系统升级导致不兼容时，麻烦就又来了。
而上面所说的一切，都会在Github Actions的加持下，几乎完美的解决。
Github Actions是Github推出的持续集成/交付服务。免费，最近我在很多项目中一直在持续白嫖它。：）
比如以下两篇文章的用法
《利用GithubAction实现定时自动生成B站头图》《利用GithubAction爬取Github中国区排名》
利用Github Actions，我们可以建立一套工作流（workflow），而一套工作流可以由数个Action来组合。这里我做个比喻，把发布一个应用程序类比为做一道菜。
配菜 > 洗锅 > 开火 > 加盐 > 加酱油 > 翻炒 > 目测火候 > 出锅上菜
现在我们把配菜后的步骤都编辑到一个工作流当中。当我们写完代码，提交项目后，就可以运行这套工作流来自动化的完成后续的工作。
我们可以给这套工作流指定其运行的操作系统，目前可以选择操作系统如下：
Virtual environment
YAML workflow label
Notes
Windows Server 2022
windows-2022
The windows-latest label currently uses the Windows Server 2019 runner image.
Windows Server 2019
windows-latest or windows-2019
Windows Server 2016[deprecated]
windows-2016
Migrate to Windows 2019 or Windows 2022. For more information, see the blog post.
Ubuntu 20.04
ubuntu-latest or ubuntu-20.04
Ubuntu 18.04
ubuntu-18.04
macOS Big Sur 11
macos-latest or macos-11
The macos-latest label currently uses the macOS 11 runner image.
macOS Catalina 10.15
macos-10.15
实战演练当我们需要使用Github Actions的时候，我们需要在自己的git仓库中新建如下路径
下面，我们来解读（请看注释）一个帮我们完成Electron项目编译的工作流来看看它是如何工作的
# 此工作流的名字name: Build # 工作流的执行时机，可以设定为定时执行，每次push后执行，手动执行等on: # workflow_dispatch为在Github仓库的Actions面板中手动执行 workflow_dispatch:# 工作/任务，这里的工作是可以并行的。jobs: # 工作的名称“编译windows版” buildwin: # 运行的操作系统 windows server 2022 runs-on: windows-2022 # 步骤 steps: # 使用预制action：拉取最新的代码 - uses: actions/checkout@v2 # 步骤一的名称： - name: Install and Build # 该步骤运行的终端命令，进入仓库的src目录，安装依赖，运行编译命令 run: cd src && npm install && npm run buildwin # 步骤二的名称：将编译后的结果上传 - name: Upload File # 使用预制action：上传文件，可以将执行路径打包成zip上传 uses: actions/upload-artifact@v2 with: # 上传后文件的名称 name: windows # 打包的路径以及文件过滤，此为仅打包dist目录下的exe文件 path: dist/*exe # 工作的名称“编译macOS版” buildmac: # 运行的操作系统 macOS BigSur runs-on: macos-11 # 步骤 steps: # 使用预制action：拉取最新的代码 - uses: actions/checkout@v2 # 步骤一的名称： - name: Install and Build # 该步骤运行的终端命令，进入仓库的src目录，安装依赖，运行编译命令 run: cd src && npm install && npm run buildmac # 步骤二的名称：将编译后的结果上传 - name: Upload File # 使用预制action：上传文件，可以将执行路径打包成zip上传 uses: actions/upload-artifact@v2 with: # 上传后文件的名称 name: mac # 打包的路径以及文件过滤，此为仅打包dist目录下的dmg文件 path: dist/*dmg注释都仔细看了吗？OK，当github仓库中具备.github/workflows/工作流名称.yml的时候，打开Github仓库的Actions面板就可以看到可执行的工作流了。
点击Build，再点击Run workflow就可以运行这个工作流了
看看，我们多个Job在同时进行！
另外这个列表可以查看工作流的执行时间，以及是否执行成功。点击列表项还可以查看详细的执行日志
比如我们来看看最后这个失败的Build，到底在哪一步报错了呢？
一目了然对不对！我们再来看看成功的日志
成功后，我们已经自动将编译后的结果上传，点击即可下载。
结语Github Actions真的太方便了，一键编译三个操作系统的安装包，这是我打包electron应用程序从未有过的舒服和惬意。
情人节马上到了，我用Electron开发了一个名为心有灵犀的小软件，已开源。
它的基本功能是这样的，当双方都安装了这个软件，那么在各自的桌面上都会显示一颗红心。当你点击它的时候，双方的小红心都会跳动一下。代表你此刻正在想念对方。而对方在收到心跳的同时，也回应你一个点击，就会产生一次心有灵犀的瞬间。代表你们同时在想对方！
项目地址：https://github.com/ezshine/tinytoy-heartconnect
Postman是一套面向API全生命周期的开发与测试平台，可在Mac上发送和调试多种协议请求，管理集合、环境及认证信息，并完成脚本测试、模拟服务、监控、文档发布和团队协作。它适合开发、测试及运维人员使用，提供个人免费方案。
Docker Desktop 是 Docker 官方为 Mac 提供的容器开发环境，集成 Docker Engine、命令行工具、Compose、Build、Kubernetes 与图形化管理界面。
Android Studio 是 Google 面向安卓应用开发提供的官方集成开发环境，基于 IntelliJ IDEA 构建。它整合智能代码编辑、Gradle 构建、界面预览、设备模拟、性能分析、调试测试及 APK 分析等工具。
Xcode 是苹果面向 Mac 提供的官方集成开发环境，将代码编辑、项目构建、SwiftUI 实时预览、设备模拟、自动化测试、断点调试、性能分析和应用分发整合在同一套工作流中，适合开发与维护 iPhone、iPad、Mac、Apple Wa
JetBrains WebStorm 是面向 JavaScript、TypeScript 和现代 Web 技术的专业集成开发环境，可智能理解项目结构，提供代码补全、重构、错误检查、运行调试、测试及 Git 工具。
PhpStorm 是 JetBrains 推出的专业 PHP 集成开发环境，可在 Mac 上完成代码编写、智能检查、重构、调试、测试和数据库管理。它支持主流 PHP 框架、Composer、Git、Docker 与远程解释器。
JetBrains PyCharm 是面向 Python 开发者的集成开发环境，提供智能补全、代码检查、重构、调试、测试、版本控制及虚拟环境管理功能。Mac 版兼容 Intel 与 Apple 芯片，核心功能可免费使用。
IntelliJ IDEA 是 JetBrains 推出的专业集成开发环境，重点服务于 Java、Kotlin 与 JVM 项目开发。软件集成代码补全、静态检查、重构、调试、测试、版本控制及构建工具，并可借助插件扩展语言和框架支持。
Visual Studio Code 是微软提供的免费代码编辑器，支持 macOS，并为 Intel 与 Apple 芯片 Mac 提供适配版本。软件集代码编辑、调试、Git 源代码管理、集成终端和扩展市场于一体。
REAPER是Cockos开发的数字音频工作站，提供多轨音频与MIDI录制、剪辑、处理、混音和母带制作工具。Mac版兼容Intel与Apple芯片，支持AU、VST、VST3、CLAP等插件格式，并提供高度可定制的工作流程。
Adobe Audition 是面向播客、影视后期、音乐制作及内容创作者的专业音频工作站，提供波形精修、多轨录制与混音、频谱编辑、降噪修复、响度匹配和效果处理工具，并可与 Adobe Premiere 协同完成视频声音制作。
Pro Tools 是 Avid 推出的专业数字音频工作站，覆盖多轨录音、无损剪辑、MIDI 编曲、插件处理、自动化混音及声音与画面同步等工作。它拥有 Intro、Artist、Studio 和 Ultimate 等方案。
PixPix 是面向品牌、卖家和内容团队的在线 AI 图片视频创作平台，提供图视频 Agent、无限画布、图片生成、视频生成、自然语言编辑及商品套图、产品精修和带货视频等电商工具。
Postman 是面向 API 全生命周期的开发与协作平台。Windows 桌面版可用于构建和发送 HTTP、GraphQL、gRPC、WebSocket、MQTT 等请求，并提供环境变量、集合、脚本测试、模拟服务、监控、文档及团队工作区等
Docker Desktop 为 Windows 开发者提供集成式容器环境，内置 Docker Engine、命令行工具、Compose、Build 与 Kubernetes 等组件，可在本机完成镜像构建、容器运行、日志查看和资源管理。
Android Studio 是 Google 面向 Android 应用开发提供的官方集成开发环境，以 IntelliJ IDEA 为基础，集成智能代码编辑、Gradle 构建、设备模拟、界面预览、调试测试及性能分析工具，
WebStorm 是 JetBrains 面向 JavaScript、TypeScript 和现代 Web 技术打造的集成开发环境。它提供项目级代码分析、智能补全、安全重构、导航搜索，并集成调试、测试、终端、Git 与常用前端工具，
PhpStorm 是 JetBrains 面向 PHP 与现代 Web 开发打造的专业集成开发环境，提供代码补全、静态检查、重构、调试、测试、数据库、版本控制及前端语言支持。Windows 用户可直接下载安装程序，
PyCharm 是 JetBrains 推出的 Python 集成开发环境，提供智能代码补全、错误检查、重构、调试、测试、Git、终端及 Jupyter Notebook 支持。统一版安装后可体验 30 天 Pro 功能，
JetBrains IntelliJ IDEA 是以 Java、Kotlin 和 JVM 项目为核心的专业集成开发环境，提供智能补全、代码检查、安全重构、调试、测试、版本控制及构建工具集成。统一发行版的核心功能可免费用于商业和非商业项目，
Visual Studio Code 是微软推出的免费代码编辑器，Windows 版集成智能补全、代码导航、调试、终端和版本控制，并可通过扩展添加语言、格式化及远程开发能力。它启动较快、配置灵活，
REAPER 是 Cockos 推出的数字音频工作站，适用于录音、MIDI 编曲、音频编辑、混音、母带制作及声音设计。软件安装包小巧，支持多轨录制、灵活路由、自动化、第三方插件和脚本扩展，并提供完整功能的 60 天免费评估期。
Adobe Audition 是面向播客、影视后期、广播与音乐制作的专业音频工作站，提供波形编辑、多轨混音、频谱分析、录音、降噪修复和效果处理等功能。Windows 版通过 Adobe Creative Cloud 安装和管理，
Pro Tools 是 Avid 推出的专业数字音频工作站，提供多轨录音、音频剪辑、MIDI编曲、插件处理、自动化混音及影视声音制作能力。它适合音乐人、录音师、制作人和音频后期团队使用，并提供免费入门版、订阅方案及永久授权选择。