GitHub Actions

GitHub Actions представляет собой встроенную систему автоматизации рабочих процессов, которая позволяет запускать задачи при различных событиях репозитория: push, pull request, release и других. Для проектов на Stencil это особенно важно, поскольку компонентный подход требует регулярной сборки, тестирования и деплоя.

Основы структуры workflow

Файл конфигурации workflow находится в .github/workflows/ и имеет расширение .yml. Стандартная структура включает:

name: Stencil CI

on:
  push:
    branches: [main]
  pull_request:
    branches: [main]

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout repository
        uses: actions/checkout@v3

      - name: Set up Node.js
        uses: actions/setup-node@v3
        with:
          node-version: '18'

      - name: Install dependencies
        run: npm ci

      - name: Build Stencil project
        run: npm run build

      - name: Run tests
        run: npm run test

Ключевые моменты:

  • on: задаёт события, при которых workflow запускается. Для CI обычно используются push и pull_request.
  • jobs: определяет последовательность задач. Каждая задача (job) выполняется в отдельном виртуальном окружении.
  • steps: описывает конкретные шаги внутри задачи, включая установку зависимостей, сборку и тестирование.

Настройка кеширования

Для ускорения сборки рекомендуется использовать кеширование node_modules и сборочных артефактов:

- name: Cache Node modules
  uses: actions/cache@v3
  with:
    path: ~/.npm
    key: ${{ runner.os }}-node-${{ hashFiles('package-lock.json') }}
    restore-keys: |
      ${{ runner.os }}-node-

Это значительно сокращает время установки зависимостей при повторных запусках workflow.

Параллельная сборка и тестирование

Stencil поддерживает модульную архитектуру, что позволяет разделять тестирование компонентов на отдельные задачи:

jobs:
  lint:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - run: npm ci
      - run: npm run lint

  test:
    runs-on: ubuntu-latest
    needs: lint
    steps:
      - uses: actions/checkout@v3
      - run: npm ci
      - run: npm run test

В данном примере тесты запускаются только после успешного выполнения линтинга. Это предотвращает ненужное выполнение тестов при наличии синтаксических ошибок.

Автоматический деплой компонентов

Для публикации библиотеки компонентов можно настроить автоматический деплой на npm или GitHub Pages. Пример деплоя на npm:

deploy:
  runs-on: ubuntu-latest
  needs: build
  steps:
    - uses: actions/checkout@v3
    - uses: actions/setup-node@v3
      with:
        node-version: '18'
        registry-url: 'https://registry.npmjs.org/'
    - run: npm ci
    - run: npm run build
    - run: npm publish
      env:
        NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

Особенности:

  • needs: build гарантирует, что деплой происходит только после успешной сборки.
  • NODE_AUTH_TOKEN хранится в Secrets репозитория, что обеспечивает безопасную аутентификацию.

Использование matrix для многоверсионного тестирования

Stencil-проекты часто требуют проверки совместимости с различными версиями Node.js:

jobs:
  test:
    runs-on: ubuntu-latest
    strategy:
      matrix:
        node-version: [16, 18, 20]
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: ${{ matrix.node-version }}
      - run: npm ci
      - run: npm run build
      - run: npm run test

Matrix позволяет параллельно запускать workflow для каждой версии Node.js, обеспечивая стабильность компонентов на разных окружениях.

Интеграция с внешними инструментами

GitHub Actions легко интегрируется с инструментами для анализа кода и мониторинга покрытия тестов:

  • ESLint и Prettier — проверка кода на соответствие стандартам.
  • Jest — генерация отчётов покрытия тестов.
  • Bundlephobia — проверка веса итогового бандла.

Пример добавления ESLint в workflow:

- name: Run ESLint
  run: npx eslint src/**/*.ts

Настройка уведомлений

GitHub Actions позволяет отправлять уведомления при успешном или неудачном выполнении workflow. Это может быть email, Slack или интеграции с другими сервисами:

- name: Notify Slack
  uses: slackapi/slack-github-action@v1
  with:
    channel-id: 'C12345678'
    slack-message: 'Stencil CI workflow completed'
    status: ${{ job.status }}
  env:
    SLACK_BOT_TOKEN: ${{ secrets.SLACK_BOT_TOKEN }}

Рекомендации по организации workflow

  • Разделять задачи на build, lint, test и deploy.
  • Использовать кеширование для ускорения сборки.
  • Применять matrix для проверки совместимости с разными версиями Node.js.
  • Настраивать секреты для безопасного деплоя.
  • Поддерживать отчёты о тестах и покрытии кода.

Эта организация обеспечивает стабильность компонентов Stencil, ускоряет процессы CI/CD и упрощает интеграцию с внешними инструментами.

Оглавление