前言

在開發 Electron 應用時，比較耗時的部分應該是構建打包的過程，像用 electron-builder 這種打包工具來說，它會根據你要打包的系統來下載應用的系統鏡像打包工具，由于這些鏡像的源文件托管在 Github 上，且 nodejs 上做網絡加速很困難，所以這個過程十分消耗時間。當我們換一臺電腦，還要經歷相同的打包環境的準備時間。

前段時間 Github 推出工作流功能，也就是 Github Actions，正好可以滿足我們這種由于網絡過慢導致準備環境成本高的問題。

Github Actions 基礎概念

在 GitHub Actions 的倉庫中自動化、自定義和執行軟件開發工作流程。 您可以發現、創建和共享操作以執行您喜歡的任何作業（包括 CI/CD），并將操作合并到完全自定義的工作流程中。

這里主要有四個概念：workflow(工作流)、job(任務)、step(步驟)、action(動作)。

一個倉庫可以有多個工作流，一個工作流可以有多個任務，一個任務可以有多個步驟，一個步驟可以有多個動作。

工作流文件存放在 .github/workflows/ 目錄下，以 .yml 描述。

任務目前可以在三種系統下運行，用 runs-on 標注，包括：ubuntu-latest, windows-latest, macOS-latest。

任務由事件觸發，支持分支的 push、pull_request?事件，以及 cron 語法的時間任務觸發，由 on 字段指定。

Github Actions 機器配置

那 Github Actions 的機器性能如何呢？

這里寫了一個倉庫，專門用來查看所有支持的操作系統的信息。

倉庫地址：https://github.com/lecepin/github-actions-system-info

三個系統的信息如下所示：

┌─────────┬────────────┬───────────────────────────────────────────┐ │ (index) │ name │ info │ ├─────────┼────────────┼───────────────────────────────────────────┤ │ 0 │ '系統信息' │ 'Ubuntu 5.4.0-1032-azure x64' │ │ 1 │ '處理器' │ 'Intel? Xeon? Platinum 8171M 2.60GHz 2核' │ │ 2 │ '內存' │ '6GB' │ │ 3 │ '硬盤' │ '14GB' │ └─────────┴────────────┴───────────────────────────────────────────┘┌─────────┬────────────┬───────────────────────────────────────────────────────────┐ │ (index) │ name │ info │ ├─────────┼────────────┼───────────────────────────────────────────────────────────┤ │ 0 │ '系統信息' │ 'Microsoft Windows Server 2019 Datacenter 10.0.17763 x64' │ │ 1 │ '處理器' │ 'Intel? Xeon? Platinum 8171M 2.60GHz 2核' │ │ 2 │ '內存' │ '6GB' │ │ 3 │ '硬盤' │ '13GB' │ └─────────┴────────────┴───────────────────────────────────────────────────────────┘┌─────────┬────────────┬───────────────────────────────────────┐ │ (index) │ name │ info │ ├─────────┼────────────┼───────────────────────────────────────┤ │ 0 │ '系統信息' │ 'Mac OS X 19.6.0 x64' │ │ 1 │ '處理器' │ 'Intel? Xeon? E5-1650 v2 3.50GHz 3核' │ │ 2 │ '內存' │ '14GB' │ │ 3 │ '硬盤' │ '380GB' │ └─────────┴────────────┴───────────────────────────────────────┘

構建訴求

應用打包構建的訴求比較簡單，就是代碼 push 到 master 后，能夠進行構建，并且構建的產物可以進行下載。

構建產物，可以直接上傳到 Actions 中的?Artifact 中。

編寫工作流文件

在?.github/workflows/?目錄下創建，pack.yml 文件，內容如下：

name: Build Pack on:push:branches:- master # master 分支 push 時觸發工作流 jobs:pack: # 打包任務runs-on: windows-latest # 在 windows 系統中運行steps:- uses: actions/checkout@v2 # 下載倉庫代碼到工作流機器中- name: Install and Pack # 安裝依賴并且進行構建run: |npm installnpm run pack- name: Upload file # 將構建產物進行上傳uses: actions/upload-artifact@v2with:name: packs # 上傳后的名字path: packs # 將 packs 目錄進行上傳

保存后，即可觸發工作流執行，效果如下：

并且會把構建產物上傳到工作流中，如下：

?支持多系統的打包

如果對 Electron 打多個環境的安裝包，在 Github Actions 中可以直接用相應的系統進行打包，很方便。

如要構建 window 和 mac 的安裝包，可以創建兩個工作流文件：pack-win.yml、pack-mac.yml，把配置中的?runs-on 字段進行修改即可。

也可以做一個矩陣變量，來運行多個不同的工作流，如同時支持 mac 和 win 機器，配置如下：

name: Build Pack on:push:branches:- master jobs:pack: runs-on: ${{matrix.os}}strategy:matrix:os: [windows-latest, macOS-latest] steps:- uses: actions/checkout@v2 - name: Install and Pack run: |npm installnpm run pack- name: Upload fileuses: actions/upload-artifact@v2with:name: packspath: packs

效果如下：?

?兩個系統構建的產物，會一起上傳到?Artifact 中。

上傳文件的過濾

由于打包出來的文件包括日志文件、源文件、解壓文件等，而我們只需要安裝文件，這里可以對上傳的文件進行規則定義，如下：

- name: Upload fileuses: actions/upload-artifact@v2with:name: packspath: |packs/*dmg # mac 安裝包packs/*exe # window 安裝包

可參考這個倉庫：https://github.com/lecepin/tss-merge-to-mkv/blob/master/.github/workflows/pack.yml

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的Github Action 快速构建 Electron 应用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。