你真的会用Github吗？Github Actions魔法之Electron自动打包

前言

相信很多web前端开发的小伙伴和我一样，在想到要开发桌面端应用的时候会第一时间想到用Electron来开发。它可以让我们使用熟悉的HTML JS CSS来开发桌面应用。只需要一套代码，你的应用就可以轻松的运行在Windows，macOS，Linux三大操作系统上。

但是过去开发Electron应用的时候想要编译出三大系统的应用程序安装包就有点麻烦了，你需要分别在三个操作系统上执行编译命令才能编译出对应系统的安装包。

注：macOS旧版的系统可以利用Wine这个虚拟windows环境直接编译出windows系统的安装包，在M1芯片的Mac上暂时还不支持运行Wine。

在不知道本文的方法之前，开发的过程是很开心的，但编译的过程

提前运行你的Windows系统虚拟机或使用Windows系统电脑
使用虚拟机通过共享目录访问项目目录或重新clone项目
运行npm install安装项目开发环境必备的依赖包
运行编译命令
编译时会下载对应操作系统的依赖
复制你的编译结果去发布应用程序吧

让人痛苦...

当然，1-3只需要在对应的操作系统上设置好一次就行。不过，当你的操作系统升级导致不兼容时，麻烦就又来了。

而上面所说的一切，都会在Github Actions的加持下，几乎完美的解决。

Github Actions

Github Actions是Github推出的持续集成/交付服务。免费，最近我在很多项目中一直在持续白嫖它。：）

比如以下两篇文章的用法

《利用GithubAction实现定时自动生成B站头图》
《利用GithubAction爬取Github中国区排名》

利用Github Actions，我们可以建立一套工作流（workflow），而一套工作流可以由数个Action来组合。这里我做个比喻，把发布一个应用程序类比为做一道菜。

配菜 > 洗锅 > 开火 > 加盐 > 加酱油 > 翻炒 > 目测火候 > 出锅上菜

配菜就像是写代码，他决定了我们最后上菜的内容。你甚至可以只提供配菜，让客人自己去炒。很多Electron的开源项目，提供了源码和使用说明，需要开发者自行编译出应用程序。

现在我们把配菜后的步骤都编辑到一个工作流当中。当我们写完代码，提交项目后，就可以运行这套工作流来自动化的完成后续的工作。

可选的操作系统环境

我们可以给这套工作流指定其运行的操作系统，目前可以选择操作系统如下：

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仓库中新建如下路径

.github/workflows/工作流名称.yml

下面，我们来解读（请看注释）一个帮我们完成Electron项目编译的工作流来看看它是如何工作的

代码语言：javascript复制

# 此工作流的名字
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