共计 3343 个字符，预计需要花费 9 分钟才能阅读完成。
用于 GitHub Actions 主动公布 Npm 包和网站
自从 GitHub 发表 GitHub Actions 在平台上对所有开发人员和存储库可用以来，GitHub Actions 越来越受欢迎。很多第三方平台在生态系统中有速度等限度，将进一步推动开发人员将他们的软件自动化迁徙到 GitHub Actions。
在本文中，我想向你展现我如何应用 GitHub Actions 公布我在开源我的项目中保护的 npm 包。如果你遵循由 GitHub 拉取申请工作流程组成的 GitHub 流程，那么这将进一步对立团队和社区贡献者的工作流程的和晋升他们的体验。
GitHub Actions
GitHub Actions 是 GitHub 开发的一项技术，旨在为开发人员提供一种围绕继续集成自动化其工作流程的办法——帮忙他们构建、部署、安顿重复性工作等。GitHub Actions 原生可用并集成到 GitHub 存储库中，并具备来自社区贡献者的许多可重用工作流，例如公布 npm 包、公布 docker 图像、运行平安测试等等。
Github Action 实质就是 Github 推出的继续集成工具, 每次提交代码到 Github 的仓库后，Github 都会主动创立一个虚拟机（例如 Mac / Windows / Linux），来执行一段或多段指令，例如：
npm install
npm run build 咱们集成 Github Action 的做法，就是在咱们仓库的根目录下，创立一个 .github 文件夹，外面放一个 *.yaml 文件, 这个 Yaml 文件就是咱们配置 Github Action 所用的文件。
Github Action 的应用限度
- 每个 Workflow 中的 job 最多能够执行 6 个小时
- 每个 Workflow 最多能够执行 72 小时
- 每个 Workflow 中的 job 最多能够排队 24 小时
- 在一个存储库所有 Action 中，一个小时最多能够执行 1000 个 API 申请
- 并发工作数：Linux：20，Mac：5
什么是 GitHub Workflow？
GitHub 工作流是一组基于触发器或基于 cron 的打算运行的 job 作业。作业由组成自动化工作流程的一个或多个步骤组成。咱们通过创立 YAML 文件来创立 Workflow 配置。
从零搭建 Npm 包继续集成
在理解了根本的常识之后，我将通过一个理论的我的项目来带大家疾速上手 Github Action，最终实现的指标: 当咱们将代码推送到 github 上后, 通过 Github Action 主动打包我的项目，并一键公布到 npm 上和公布一个 Github Page 网站。
获取 Npm Access Token
要想让 Github Action 能有权力公布指定的 npm 包, 须要获取 npm 的 通行证. 这个通行证就是 npm token, 所以咱们须要登入 npm 官网, 生成一个 token。
获取 Personal Access Token
点击 Generate new token 生成一个新的 token 并复制，须要留神的事，这个 Personal Access Token 跟下面 Npm Access Token 一样只会在生成胜利的时候展现，一旦退出就无奈再查看，所以要记得保留。
设置 Github Secret
咱们在拿到 npm token 后, 关上对应我的项目的 Github 仓库, 切换到 settings 面板, 找到 secrets 子菜单, 创立一个新的 secret, 将 npm token 复制到内容区并命名
填写 Name 和 Value 字段，Name 为 ACCESS_TOKEN 和 NODE_AUTH_TOKEN，Value 为刚刚保留的 Personal Access Token 和 Npm Access Token 值。
| Token Name | Key | Vale |
|---|---|---|
| Personal Access Token | ACCESS_TOKEN | ${{secrets.ACCESS_TOKEN}} |
| Npm Access Token | NODE_AUTH_TOKEN | ${{secrets.NPM_TOKEN}} |
应用 Workflows 模板
咱们切换到 actions 面板能够看到很多 workflows 模版，咱们抉择如下模版:
当然如果属性 yaml 配置的也能够本人创立一个 workflow 供别人应用。
咱们点击装置按钮之后会跳转到编辑界面，咱们能够间接点击右上放的提交按钮:
此时就创立了一个 workflow。
配置 workflows
这里我列一下 github-actions-tutorial 的 workflow：
name: Node.js Package
# 触发工作流程的事件
on:
push:
branches:
- main
- "releases/**"
- dev
# 按程序运行作业
jobs:
publish-gpr:
# 指定的运行器环境
runs-on: ubuntu-latest
# 设置 node 版本
strategy:
matrix:
node-version: [16]
steps:
# 拉取 github 仓库代码
- uses: actions/checkout@v3
# 设定 node 环境
- uses: actions/setup-node@v3
with:
node-version: ${{matrix.node-version}}
# 设置发包 npm 地址仓库
registry-url: https://registry.npmjs.org
# 装置依赖，相当于 npm ci
- name: Install dependencies 📦️
run: npm install
# 执行构建步骤
- name: 构建
run: |
npm run build
# 执行部署
- name: 部署
# 这个 action 会依据配置主动推送代码到指定分支
uses: JamesIves/github-pages-deploy-action@releases/v3
with:
# 指定密钥，即在第一步中设置的
ACCESS_TOKEN: ${{secrets.ACCESS_TOKEN}}
# 指定推送到的近程分支
BRANCH: pages
# 指定构建之后的产物要推送哪个目录的代码
FOLDER: build
- run: npm publish
env:
# 刚刚设置的 NPM_TOKEN
NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}其中有几个术语和大家介绍一下:
- name Workflow 的名称，Github 在存储库的 Action 页面上显示 Workflow 的名称
- on 触发 Workflow 执行的 event 名称，比方 on: push(单个事件)，on: push, workflow_dispatch(多个事件)
- jobs 一个 Workflow 由一个或多个 jobs 形成，含意是一次继续集成的运行，能够实现多个工作
- steps 每个 job 由多个 step 形成，它会从上至下顺次执行
- env 环境变量, secrets.NPM_TOKEN 就是咱们之前定义的 secret
提交测试
咱们批改一下我的项目的代码, 而后执行:
git add .
git commit -m ':new: your first commit'
git push提交胜利之后咱们关上我的项目的 github action 面板:
点开对应 Github 仓库的 Actions 选项卡就能够看到每步的构建过程。能够看到咱们在 *.yml 中的定义的 push 事件被触发，执行了 jobs 中的所有步骤，打包并将打包后到 build 文件夹中的内容推送到了 github 仓库的 pages 分支。
当 job 选项实现的时候，进入仓库的 Settings => Pages 菜单下，将 Source Branch 字段设置为 pages，文件夹抉择 root 根目录就好：
点击 Save 按钮稍等片刻，等到下面呈现告诉示意曾经构建胜利。点击链接进入即可看到主动构建实现的利用了，从此以后，你只须要推送到 yml 文件中指定的分支，就能够主动触发构建，自动更新你的网站了。
查看公布的 NPM 包和网站
- 查看工作流文件 和 已公布网站
- 查看公布的 Npm 包
参考文档
- GitHub Actions/ 工作流程语法
- 应用 Github Actions 实现前端利用部署及 npm 包公布自动化
- 5 分钟教你疾速把握 Github Action 继续集成
如果文章和笔记能带您一丝帮忙或者启发，请不要悭吝你的赞和珍藏，你的必定是我后退的最大能源😁
附笔记链接，浏览往期更多优质文章可移步查看，喜爱的能够给我点赞激励哦：
https://github.com/Wscats/git…
