Continuous Integration

Continuous Integration (CI) — это метод разработки, при котором изменения в коде регулярно интегрируются в основную ветку репозитория. Важно понимать, что CI не ограничивается только сборкой проекта: это целый процесс, который включает в себя автоматическое тестирование, линтинг, развертывание и другие этапы. В контексте разработки на Stencil, CI помогает поддерживать высокое качество кода, обеспечивая автоматическое выполнение множества задач при каждом обновлении кода.

Настройка CI для проекта на Stencil

Для интеграции CI в проект на Stencil, чаще всего используется одна из популярных CI/CD систем, таких как GitHub Actions, GitLab CI или Travis CI. Каждый из этих сервисов позволяет настроить автоматический запуск сборки и тестов при каждом изменении в репозитории.

  1. Создание конфигурационного файла Для настройки CI потребуется создать конфигурационный файл, который будет описывать шаги, необходимые для сборки и тестирования проекта. Например, в GitHub Actions файл конфигурации называется .github/workflows/ci.yml.

    Пример базового конфигурационного файла для GitHub Actions:

    name: CI

on:
  push:
    branches:
      - main
  pull_request:
    branches:
      - main

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout code
        uses: actions/checkout@v2

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

      - name: Install dependencies
        run: npm install

      - name: Run Stencil build
        run: npm run build

      - name: Run tests
        run: npm run test

    В данном примере:

    • on.push и on.pull_request указывают, что рабочий процесс будет запускаться при изменениях в ветке main или при создании pull request.
    • В шаге Set up Node.js устанавливается Node.js версии 16.
    • Install dependencies выполняет установку зависимостей через npm.
    • Шаг Run Stencil build запускает сборку с помощью команды npm run build.
    • В последнем шаге выполняются тесты проекта с помощью команды npm run test.

  2. Конфигурация для Stencil В Stencil можно настроить дополнительные параметры сборки и тестирования, которые будут использоваться в процессе CI. Например, в файле stencil.config.ts можно задать оптимизацию сборки, маршруты для развертывания или пути к тестам.

    Пример конфигурации файла stencil.config.ts:

    import { Config } from '@stencil/core';

export const config: Config = {
  namespace: 'my-component-library',
  outputTargets: [
    {
      type: 'dist',
      dir: 'dist',
    },
    {
      type: 'www',
      serviceWorker: null,
      baseUrl: 'https://example.com/',
    },
  ],
  testing: {
    moduleNameMapper: {
      '\\.(css|scss)$': 'identity-obj-proxy',
    },
  },
};

    В данном примере:

    • Определяется пространство имен namespace, которое будет использоваться для компонентов в проекте.
    • Конфигурируются выходные директории для сборки: dist для стандартной сборки и www для веб-развертывания.
    • В разделе testing можно настроить маппинг стилей (например, scss или css) для тестов, чтобы не возникало ошибок при импорте стилей в тестируемые компоненты.

  3. Тестирование и покрытие Для полноценной интеграции CI важно настроить автоматическое выполнение тестов. В Stencil предусмотрена встроенная поддержка unit-тестов с использованием Jest. Все тесты, написанные с помощью Jest, будут автоматически запускаться при каждом изменении кода, что позволяет оперативно выявлять баги.

    Пример конфигурации тестирования в stencil.config.ts:

    testing: {
  globals: {
    'ts-jest': {
      tsconfig: 'tsconfig.json',
    },
  },
  moduleNameMapper: {
    '\\.(css|scss)$': 'identity-obj-proxy',
  },
}

    Важный момент — тесты должны быть написаны в соответствии с определёнными соглашениями, чтобы их можно было автоматически запускать в CI. Обычно тестовые файлы размещаются в папке src/components и имеют суффикс .spec.tsx.

    Для запуска тестов достаточно будет выполнить команду npm run test в CI-среде.

  4. Автоматическая сборка и деплой CI-процесс можно настроить так, чтобы после успешной сборки и прохождения тестов код автоматически развёртывался на сервере или в облаке. Для Stencil это можно сделать через использование различных сервисов деплоя, таких как Netlify, Vercel, AWS или другие.

    Пример шага деплоя в конфигурации GitHub Actions:

    - name: Deploy to Netlify
  run: |
    curl -sL https://github.com/netlify/cli/releases/download/v3.0.0/netlify-cli-linux-amd64.tar.gz | tar xz
    ./netlify deploy --prod --dir=www

    В данном случае, после успешного завершения сборки и тестов, проект автоматически развертывается на платформе Netlify.

Рекомендации по настройке CI

  1. Использование кэширования зависимостей В CI часто требуется установка зависимостей, что может занимать много времени. Чтобы ускорить процесс, можно использовать кэширование. В GitHub Actions, например, можно кэшировать папку node_modules с помощью actions/cache:

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

  2. Регулярные проверки качества кода Важно настроить автоматическую проверку кода с использованием линтеров, таких как ESLint или Prettier, чтобы гарантировать высокое качество кода на каждом шаге CI.

    Пример шага для линтинга кода:

    - name: Lint code
  run: npm run lint

  3. Разделение на этапы Для улучшения читаемости и поддержки, CI-процесс можно разделить на несколько этапов: сборка, тестирование, линтинг, деплой. Это позволяет быстрее локализовать ошибки, если они происходят на каком-то из этапов.

  4. Мониторинг и уведомления В CI-системах можно настроить уведомления о статусе сборки через Slack, электронную почту или другие каналы. Это позволяет команде быстро реагировать на проблемы.

Заключение

Continuous Integration является важным инструментом в разработке с использованием Stencil. Он помогает автоматизировать процессы сборки, тестирования и деплоя, что существенно повышает производительность и качество кода. Правильно настроенный CI-процесс позволяет значительно снизить количество ошибок, ускорить разработку и улучшить взаимодействие внутри команды.

Оглавление