使用GitHub Actions打包前端项目并自动上传到Releases

使用GitHub Actions打包前端项目并自动上传到Releases

前言

本文将详细介绍如何使用GitHub Actions自动打包前端项目并上传到Releases。GitHub Actions是一种持续集成和持续部署（CI/CD）工具，可以帮助开发者自动化执行各种任务，如代码构建、测试和部署。

教程

创建workflows

首先需要在项目根目录创建.github/workflows目录：

.github
  └─ workflows

创建yml文件

在workflows目录下创建一个名为releases.yml的文件：

├─ .github
│  └─ workflows
│     └─ releases.yml

vscode 插件安装

建议安装GitHub官方插件：GitHub Actions。这个插件能在编写yml文件时提供代码高亮和语法提示。

配置工作流名称和触发条件

在releases.yml中配置工作流名称和触发条件：

name: 打包插件并发布到Releases
on:
  push:
    branches:
- main
  workflow_dispatch: # 允许手动触发该工作流

增加工作jobs

一个yml文件可以配置多个job工作，每个job下面可以定义具体的操作步骤：

jobs:
  job1: 
  job2: 

增加build的job工作

我们需要一个代码的运行环境，这里采用GitHub官方提供的ubuntu-latest系统：

jobs:
  build:
    name: 打包工作
    runs-on: ubuntu-latest

创建步骤

每个工作都可以有很多步骤，所以需要一个统一的入口来进行管理：

jobs:
  build:
    name: 打包工作
    runs-on: ubuntu-latest
    steps:
- 具体步骤1
- 具体步骤2
      ...

步骤：克隆仓库代码

开源仓库

对于开源仓库，可以直接克隆代码：

steps:
- name: 克隆代码
    run: |
      git clone https://github.com/<your-username>/<your-repository>.git
      cd <your-repository>
      git checkout main

私有仓库

对于私有仓库，需要使用token进行认证：

steps:
- name: git全局设置
    run: |
      git config --global user.name "github-actions[bot]"
      git config --global user.email "github-actions[bot]@users.noreply.github.com"
- name: 克隆代码
    env:
      TOKEN: ${{ secrets.MY_TOKEN }}
    run: |
      git clone https://x-access-token:${TOKEN}@github.com/<your-username>/<your-repository>.git
      cd <your-repository>
      git checkout main

步骤：安装node

由于环境中没有node，需要手动安装：

steps:
- uses: actions/checkout@v4
- uses: actions/setup-node@v4
  with:
    node-version: 20
    cache: 'npm'
- run: npm ci
- run: npm test

步骤：安装pnpm

steps:
- name: 安装pnpm
    run: npm install -g pnpm@latest

步骤：安装依赖

steps:
- name: 安装依赖
    run: |
      cd chrome-extension
      pnpm install

步骤：打包项目

steps:
- name: 打包插件
    run: |
      cd chrome-extension  
      pnpm run build

步骤：创建zip文件

steps:
- name: 创建谷歌浏览器扩展zip文件
    run: |
      cd chrome-extension
      zip -r ../chrome-extension.zip ./dist
- name: 创建serverless模版zip文件
    run: |
      zip -r ./serverless-template.zip ./serverless-template

步骤：获取版本号

从package.json文件中获取版本号：

steps:
- name: 获取新版本号
    id: get_chrome_extension_version
    run: |
      VERSION=$(node -p "require('./chrome-extension/package.json').version" 2>/dev/null || echo "v0.0.1")
      echo "VERSION=${VERSION}" >> $GITHUB_ENV
      echo "New version:${VERSION}"

步骤：创建Release

使用GitHub Actions创建Release：

steps:
- name: 创建Release
    id: create_release
    uses: softprops/action-gh-release@v2
    with:
      tag_name: ${{ env.VERSION }}
      name: v${{ env.VERSION }}
      draft: false
      prerelease: false
      files: |
        ./chrome-extension.zip
        ./serverless-template.zip

触发

当向main分支推送代码时，或者合并分支时，都会触发该工作流。可以在仓库的Actions中查看进展。此外，还可以手动触发该工作流。