使用 github actions 优化开发工作流

[yinxin630]

Github Actions 可轻松实现开发工作流程的自动化。包括代码格式检查, typescript 类型检查, 跑单元测试, 自动构建并上传 CDN 和服务器. 还可以自己编写标本实现特定需求

如何使用 action

在仓库根目录下创建 .github/workflows 目录, 在该目录下创建 yml 文件写入 action 内容, 通过 push 或者 pull request 触发 action

运行效果

下面是一些我所用到的 action

执行 eslint

name: Lint Code Style # action 名称

on: # action 触发时间
  push:
    branches: [ master ] # 向 master push 时
  pull_request:
    branches: [ master ] # 向 master 提 pull request 时

jobs: # 任务
  lint:
    runs-on: ubuntu-latest # 操作系统
    strategy:
      matrix:
        node-version: [10.x] # node 版本
    steps:
    - uses: actions/checkout@master
    - uses: bahmutov/npm-install@v1 # 带缓存功能的模块安装器, 兼容 npm 和 yarn
    - run: npx eslint ./ # 执行 eslint

使 yarn install 支持缓存 https://github.com/marketplace/actions/npm-or-yarn-install-with-caching

执行 typescript 类型检查

name: Typescript Type Check

on:
  push:
    branches: [ master ]
  pull_request:
    branches: [ master ]

jobs:
  ts:
    runs-on: ubuntu-latest
    strategy:
      matrix:
        node-version: [10.x]
    steps:
    - uses: actions/checkout@master
    - uses: bahmutov/npm-install@v1
    - run: npx tsc --noEmit # 只检查类型, 不输出 js

执行 jest 单测

name: Unit Test

on:
  push:
    branches: [ master ] # 只在 push master 时执行

jobs:
  test:
    runs-on: ubuntu-latest
    strategy:
      matrix:
        node-version: [10.x]
    steps:
    - uses: actions/checkout@master
    - uses: bahmutov/npm-install@v1
    - run: npx jest # 执行 jest

输出测试覆盖率报告到 pull request 评论中 https://github.com/marketplace/actions/jest-lcov-reporter

name: Unit Test

on:
  pull_request:
    branches: [ master ] # 只在提 pull request 时执行

jobs:
  test:
    runs-on: ubuntu-latest
    strategy:
      matrix:
        node-version: [10.x]
    steps:
    - uses: actions/checkout@master
    - uses: bahmutov/npm-install@v1
    - run: yarn test
    - uses: romeovs/[email protected] # 输出测试覆盖率
      with:
        github-token: ${{ secrets.GITHUB_TOKEN }}
        lcov-file: ./coverage/lcov.info # 覆盖率结果文件

覆盖率输出效果

其他

Github Actions 市场, 搜索所有 action https://github.com/marketplace?type=actions

[xin660]

图片都显示不了。

[yinxin630]

图片都显示不了。

没问题啊, 你翻个墙试试?