GrowingIO Design 组件库搭建之 CI/CD

前言

在《GrowingIO SaaS 产品 CI/CD 实践》一文中，介绍了持续集成（Continuous Intergration，简称 CI）、持续交付（Continuous Delivery，简称 CD）和持续部署（Continuous Deployment，简称 CD）三个概念，以及在 GrowingIO SaaS 产品中的实践。 文中还强调一个典型的 CI/CD 流程建设至少需要具备以下功能的工具：

• 代码存储库，即需要版本控制软件来保障代码的可维护性，同时作为构建过程的素材库

• 持续集成服务器，用于自动执行构建，测试，部署等任务

• 集中的制品管理仓库，用于存放构建的成果物，用于部署

• 自动部署工具，用于将构建到的程序自动的部署到目标服务器

对于 GrowingIO Design，使用的工具是：

• 代码存储库：GitHub

• 持续集成服务器：GitHub Actions

• 集中的制品管理仓库：npm

• 自动部署工具：Vercel

持续集成

代码检查（Lint codes）

在《GrowingIO Design 组件库搭建之开发工具》一文中，介绍了组件库使用 stylelint 和 ESLint 作为代码规范工具。

为了方便使用，在 package.json 文件中增加一下两个脚本（后文简称脚本化）：

{
  "scripts": {
    "eslint": "eslint src --ext .ts,.tsx",
    "stylelint": "stylelint 'src/**/*.{css,less}' --syntax less",
  },
}

然后用 GitHub Actions 来执行这两个命令：

jobs:
  lint:
    name: Lint codes
    needs: install
    runs-on: ubuntu-latest
    steps:
      - name: Checkout repository
        uses: actions/checkout@v2
        with:
          ref: ${
  { github.event.pull_request.head.sha }}
      - name: Setup Node.js
        uses: actions/[email protected]
        with:
          node-version: 14
      - name: Restore Node.js modules
        uses: actions/[email protected]
        with:
          path: node_modules
          key: ${
  { runner.os }}-${
  { hashFiles('yarn.lock') }}
      - name: StyleLint
        run: yarn stylelint
      - name: ESLint
        run: yarn eslint

单元测试（Unit test）

《GrowingIO Design 组件库搭建之单元测试》中提到单元测试工具主要使用 Jest，在 CI 流程中除了保证单元测试通过，还要统计测试覆盖情况（通过 --covera