利用 GitHub Actions 自动更新Docs文档和发布NPM包

前言

前文：从零开始搭建规范的 TypeScript SDK 项目工程环境

本文是在前文构建的项目基础上，进行 Github Actions 配置，配置会包含以下两个方面：

自动更新 静态资源（Vuepress 的 Docs文档）到 Github 上
自动 Build构建 并将产物发布到 NPM 上

这里主要是介绍了 Github Actions 的一些基本用法，如果想要学习更加复杂的，可以查看 Actions 官网

Github

完整的配置代码都已经发布在 Github 上，如果有哪个地方配置不清晰可以查看代码

先前准备

进行配置前，我们需要一些先前准备：创建 Github Token 和 NPM Token ，否则我们是没法往 Github 和 NPM 上推资源的

创建 Github Token

为了将 Docs 文档发布在 Github 上，我们需要创建一个 Github Token ，创建链接github.com/settings/to…

Note 是这个 Token 的名称，我们这里定义它为 Deploy

Expiration 是这个 Token 的有效时长，我这里选择为90天，可以根据自身需要去配置

而权限我们需要给它 workflow 和 repo 的权限

然后我们点击下面的 Generate token 后，会给我们生成一个 Token，生成的 Token 只会显示这一次，我们可以把它保存起来，如果不慎丢失了这个 Token ，我们可以重新在来生成一个。

创建 NPM Token

我们登录 NPM 官网，登录自己的账号后，鼠标悬浮右上角我们的头像，点击 Access Tokens 去进入创建 Token 界面。

进入页面后，我们点击右上角的 Generate New Token 按钮

点击了 Generate New Token 后进入下图所示页面，我们选择 Automation 或者 Publish 都可以

创建后的 Token 显示在这个位置，同样也只会显示一次，我们要记录起来

在项目仓库中添加Secret

我们上面申请了 NPM Token 和 Github Token 但是我们还需要把这俩个 Token 配置到项目设置里的 secrets 里才行，如图所示，进入我们的项目，点 Setting 再点 Secrets ，然后点击右上角的 New repository secret 按钮

这里的 Name，就是这个 Token 的名称，而下面的 Value，就是申请到的 Token 具体值

我们设置 Name 为 NPM_PUBLISH，而 Value 为我们申请到的 NPM Token。

同样，再设置一个 Name 为 Deploy ，而 Value 为我们申请的 Github Token

设置完后如图所示：

配置 workflows

上面都配置完了先前需要准备的 Token 后，我们就可以进入到我们实际的代码里面配置 workflows

这里我们先做如下步骤：

在项目根目录下创建 .github 文件夹。
在 .github 下创建 workflows 文件夹。
在 workflows 下创建 deploy.yml 文件。

deploy.yml 的文件代码如下：

# name，也就是当前 workflow 的名称
name: buildLibrary

# 下文的意思是：当监听到tag的变更时，执行脚本，比如我们在 github 内新建一个tag
on:
  push:
    tags:
      - 'v*'

# jobs 也就是任务的意思
jobs:
  docs_and_publish:
    # name: 在 Github 中显示的 job 名称
    name: buildLibrary
    runs-on: ubuntu-latest
    steps:
      # name:  当前 step 的名字
      - name: Checkout    # 获取分支的代码和提交记录
        uses: actions/checkout@v2

      - name: Setup Node.js v14.x # 设置 Node.js 的环境
        uses: actions/setup-node@v1
        with:
          node-version: '14.x'

      - name: Install
        run: npm install # 安装依赖

      - name: Build
        run: npm run build # 打包

      - name: Docs
        run: npm run docs:build # 打包文档

      - name: Deploy
        uses: peaceiris/actions-gh-pages@v3 # 使用部署到 GitHub pages 的 action
        with:
          publish_dir: ./docs/.vuepress/dist # 部署打包后的 dist 目录
          github_token: ${{ secrets.Deploy }} # secret 名
          commit_message: Update Github gh-pages # 部署时的 git 提交信息，根据自身需要填写即可

      - name: Publish to NPM  # 推送到 NPM 上
        run: |
          npm config set //registry.npmjs.org/:_authToken=$NPM_TOKEN
          npm publish
        env:
          NPM_TOKEN: ${{ secrets.NPM_PUBLISH }}