关注并将「趣谈前端」设为星标
每天定时分享技术干货/优秀开源/技术思维
前言
前段时间发布了一个滑动验证组件包 react-slider-vertify
, 里面用到了 Github Action
作为自动化打包发布工具, 我们只需要简单的配置就能轻松的在执行 git push
的时候自动打包项目并将其一键发布到 npm
中.
接下来我就带大家一起了解一下 Github Action
, 并从零教大家使用 Github Action
高效的管理和发布自己的开源项目.
Github Action 简介
Github Action
是 Github 推出的持续集成工具, 每次提交代码到 Github 的仓库后,Github 都会自动创建一个虚拟机(例如 Mac / Windows / Linux),来执行一段或多段指令,例如:
npm install
npm run build
我们集成 Github Action
的做法,就是在我们仓库的根目录下,创建一个 .github
文件夹,里面放一个 *.yaml
文件, 这个 Yaml
文件就是我们配置 Github Action
所用的文件。
有关 yaml
更多的知识可以参考: https://www.codeproject.com/Articles/1214409/Learn-YAML-in-five-minutes
Github Action 的使用限制
每个 Workflow 中的 job 最多可以执行 6 个小时
每个 Workflow 最多可以执行 72 小时
每个 Workflow 中的 job 最多可以排队 24 小时
在一个存储库所有 Action 中,一个小时最多可以执行 1000 个 API 请求
并发工作数:Linux:20,Mac:5
Workflow 是由一个或多个 job 组成的可配置的自动化过程。我们通过创建 YAML 文件来创建 Workflow 配置。
从零搭建 github 持续集成项目(npm包持续集成)
在了解了基本的知识之后, 我将通过一个实际的项目来带大家快速上手 Github Action
. 最终实现的目标: 当我们将代码推送到 github上后, 通过 Github Action
自动打包项目, 并一键发布到 npm
上.
![2a7f9fb716f15c975747a8e5b2bb6b03.png](https://i-blog.csdnimg.cn/blog_migrate/f6658491fb465f380b86f27021379e44.png)
获取 npm token
要想让 Github Action
能有权利发布指定的 npm
包, 需要获取 npm
的 通行证. 这个通行证就是 npm token
, 所以我们需要登入 npm
官网, 生成一个 token
:
![cd49190fb0a3b179ef0d3312dde223b1.png](https://i-blog.csdnimg.cn/blog_migrate/de168e038c579782ee43d4872ffc2d8a.png)
设置 github secret
我们在拿到 npm token
后, 打开对应项目的 github
仓库, 切换到 settings
面板, 找到 secrets
子菜单, 创建一个新的 secret
, 将 npm token
复制到内容区, 并命名(这个名字会在yaml文件中用到).
![428e88a29769f5a5192d83302b91aa05.png](https://i-blog.csdnimg.cn/blog_migrate/4794f0a09714a44a6bbf507dfd105e79.png)
创建 Github Action
![c561b55cb174dd2b2ea9ca8c78321fa0.png](https://i-blog.csdnimg.cn/blog_migrate/b27f7d95c8034e72398607f659742658.png)
我们切换到 actions
面板可以看到很多 workflows
模版, 我们选择如下模版:
![34ad13295bcbb2b4f9ef47ad94e98e17.png](https://i-blog.csdnimg.cn/blog_migrate/5a4f905363891c6eafc4ef65eba0d040.png)
当然如果属性 yaml
配置的也可以自己创建一个 workflow
供他人使用.
我们点击安装按钮之后会跳转到编辑界面, 我们可以直接点击右上放的提交按钮:
![756cc0b6c7cd8a168acbc43529fe16fb.png](https://i-blog.csdnimg.cn/blog_migrate/06abd1cf78220b8bbef0acb62c3a9253.png)
此时就创建了一个 workflow
.
配置 workflows
这里我列一下 react-slider-vertify
的 workflow.
name: Node.js Package
on:
pull_request:
branches:
- main
push:
branches:
- main
jobs:
build:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2
- uses: actions/setup-node@v2
with:
node-version: 14
- run: yarn
- run: yarn build
publish-npm:
needs: build
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2
- uses: actions/setup-node@v2
with:
node-version: 14
registry-url: https://registry.npmjs.com/
- run: npm publish --access public
env:
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
面板:
![6956cf6c5bd7b90eaf5b8e37bce82203.png](https://i-blog.csdnimg.cn/blog_migrate/8edecf12a4309f5307bf8610b32ab225.png)
可以看到代码线上构建的流程和状态, 是不是和我们在开发企业项目的自动化流程很像呢?
更多推荐
点个在看你最好看