github Actions 自动发布npm版本并创建release tag

什么是 github Actions

Github Actions是Github推出的一个新的功能，可以为我们的项目自动化地构建工作流，例如代码检查，自动化打包，测试，发布版本等...

本文主要记录下我是如何使用github的actions自动发布npm版本和创建 github的release的，并做下记录与回顾，一下代码操作环境是 node/14*,vite/2.*, vue/3.*, 操作的代码是采用vite + vue 开发的一套ui。

github地址

基本概念

GitHub Actions 有一些自己的术语。

workflow （工作流程）：持续集成一次运行的过程，就是一个 workflow。
job （任务）：一个 workflow 由一个或多个 jobs 构成，含义是一次持续集成的运行，可以完成多个任务。
step（步骤）：每个 job 由多个 step 构成，一步步完成。
action （动作）：每个 step 可以依次执行一个或多个命令（action）。

创建第一个 workflow

为了了解到 actions的整体流程和使用细节，我们选择创建自己的workflow。

默认

# name属性用来指定这个工作流的名字
name: CI
# 这个部分用来指定能够触发工作流执行的事件
on:
  # 当对分支main进行push操作的时候，这个工作流就被触发了
  push:
    branches: [ master ]
  pull_request:
    branches: [ master ]

  workflow_dispatch:

# 工作流是由一个或多个的jobs构成的，在jobs里来说明要交给GitHub aciton执行的任务
jobs:
  # 这个jobs中的一个任务，名字叫build(随便怎么取)
  build:
    # 用来指定这个任务在什么操作系统上跑(服务器是GitHub免费提供的)
    runs-on: ubuntu-latest

    # 指出这个build任务的步骤
    steps:
      # github actions 自带插件主要是为了检出当前仓库的代码
      - uses: actions/checkout@v2

      # 一条shell 命令， name为该条命令的名字 随便取名字
      - name: Run a one-line script
        run: echo Hello, world!

      # 运行多条shell
        run: |
          echo Add other actions to build,
          echo test, and deploy your project.

我的需求

当代码 push 到 deploy-vui 分之后, 自动将最新代码进行打包

打包完成后将打包后的代码发布到npm

当npm发布成功后，对当前分之的最新代码进行 release。

现在我们已经了解到我们的需求了，那么下面我们就要按照需求在书写workflow

第一步

添加对deploy-vui分之的push监听

# name属性用来指定这个工作流的名字
name: npm to deploy-vui and create release

on:
  # 当对分支deploy-vui进行push操作的时候,触发该条工作流
  push:
    branches: [ deploy-vui ]

打包代码

如果想打包代码，首先要建立好我们代码的运行环境

获取npm token
- 1. 进入npm主页点击access Tokens
- 1. 点击 Generate New Token 按钮，创建 token，一定要保存好token
将npm token放入github项目的secrets

主要流程如下

# name属性用来指定这个工作流的名字
name: npm to deploy-vui and create release

on:
  # 当对分支deploy-vui进行push操作的时候,触发该条工作流
  push:
    branches: [ deploy-vui ]
jobs:
  build-publish-release
  	runs-on: ubuntu-latest
    
    steps:
      - uses: actions/checkout@v2 # 先检出代码
        
      - name: 初始化node环境
        uses: actions/setup-node@v1
        with:
          node-version: ${{ matrix.node-version }}
          registry-url: https://registry.npmjs.org/ # 如果不配置将影响publish
          
      - name: 安装yarn # 因为我的代码采用了monorepo的 workspace形式 所以必须使用yarn
        run: npm i -g yarn
       
      - name: 安装依赖 # 使用yarn 安装依赖
        run: yarn
      
       - name: 编译部署ui
        working-directory: 'package/vitevui' # 因为代码采用的monorepo 所以需要进入包的目录来运行
        run: yarn build
        
      - name: publish # 向npm publish 代码 请遵循npm规范.
        working-directory: 'package/vitevui'
        env:
          NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}} # 该token是 npm的token 获取npm token请查看 步骤2 的创建 npm token 和 将npm token 放入github的 secrets下
        run: npm publish
      # 到这如果全部成功，那么我们就成功的将代码发布到了npm

第三步读取package信息，并创建 release

因为我的代码是 monorepo的包管理形式，可能会与正常包管理方案不太一样，发布具体包时，需要进入到相应的工作目录

gethub token 申请与npm token 一样，在github 设置中找到 Developer settings -> Personal access tokens, 新建一个新的 token，选择相应的权限。设置相应的secrets，请参照上面的 npm token 设置secrets

# name属性用来指定这个工作流的名字
name: npm to deploy-vui and create release

on:
  # 当对分支deploy-vui进行push操作的时候,触发该条工作流
  push:
    branches: [ deploy-vui ]
jobs:
  build-publish-release
  	runs-on: ubuntu-latest
    
    steps:
      - uses: actions/checkout@v2 # 先检出代码
        
      - name: 初始化node环境
        uses: actions/setup-node@v1
        with:
          node-version: ${{ matrix.node-version }}
          registry-url: https://registry.npmjs.org/ # 如果不配置将影响publish
          
      - name: 安装yarn # 因为我的代码采用了monorepo的 workspace形式 所以必须使用yarn
        run: npm i -g yarn
       
      - name: 安装依赖 # 使用yarn 安装依赖
        run: yarn
      
       - name: 编译部署ui
        working-directory: 'package/vitevui' # 因为代码采用的monorepo 所以需要进入包的目录来运行
        run: yarn build
        
      - name: publish # 向npm publish 代码 请遵循npm规范.
        working-directory: 'package/vitevui'
        env:
          NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}} # 该token是 npm的token 获取npm token请查看 步骤2 的创建 npm token 和 将npm token 放入github的 secrets下
        run: npm publish
      # 到这如果全部成功，那么我们就成功的将代码发布到了npm
      
      # 下面主要是创建 github 的release
      # 使用 tyankatsu0105/read-package-version-actions@v1 工具来读取对应的package.json 数据
      - name: Read package.json
        uses: tyankatsu0105/read-package-version-actions@v1
        with:
          path: './package/vitevui'
        id: package-version
        
        # 关于创建 release 的更多参数，可以查看 actions/create-release@v1
      - name: Create Release for Tag
        id: release_tag
        uses: actions/create-release@v1
        env:
          GITHUB_TOKEN: ${{ secrets.PERSONAL_TOKEN }} # 这块需要用到 github的token，因为需要对分之进行代码推送
        with:
          tag_name: vitevui-v${{ steps.package-version.outputs.version }}
          release_name: Release vitevui-v${{ steps.package-version.outputs.version }}
          prerelease: false # 是否为预发布版本
          body: |
            请点击查看 [更新日志](https://bhabgs.github.io/vite-vui-docs/components/log.html).

总结

npm actios 为我们提供了很大的便利，省去了很多搬砖的工作。方便了我们对包的管理。

其中最重要的几个部分就是，在创建workflow前一定要梳理好需求，在逐步进行功能认证，对于monorepo的包目前我的方案是采用 tyankatsu0105/read-package-version-actions@v1 的插件方案来读区指定的package.json, 完成release。 github 仓库地址

github Actions 自动发布npm版本 并创建release tag

什么是 github Actions

基本概念

创建第一个 workflow

我的需求

总结

github Actions 自动发布npm版本并创建release tag