Блог

Настройка публикаций UI-Kit пакетов через GitLab CI/CD

О том, как мы внедрили библиотеку Lerna для версионирования пакетов

Срок реализации – 30 дней.

Задачи

  1. Внедрить систему версионирования компонентов в новый UI-Kit
  2. Настроить публикацию UI-Kit пакетов через GitLab CI/CD 

Стэк

NodeJS, Yarn, Webpack, React, TypeScript, Lerna

Решение  

Пишем свой webpack-plugin

Наш клиент — крупный российский брокер. Нужно было автоматизировать управление версиями пакетов и для этого мы решили использовать библиотеку Lerna, но столкнулись с проблемой правильности сборки UI-Kit. На этом этапе нам очень пригодился самописный вебпак плагин. 
Чтобы наша библиотека Lerna работала так, как надо и импорт стилей компонента происходил автоматически, мы написали свой webpack-loader, а потом превратили его в webpack-plugin. На первоначальном этапе работ, честно говоря, было страшно лезть в такие «дебри» но, как показала локальная настройка и пробная публикация пакетов, это того стоило. 

Переносим публикацию из локального окружения на сервер CI/CD

Оказалось, что перед нами появилась новая проблема – как научить CI CD делать то же самое на своей стороне. Решение этой проблемы заняло примерно неделю, большую часть которой съела борьба с настройкой аутентификации сервера для публикации пакетов. И вот, заветная мечта была исполнена – каждый пакет UI-kit`а можно публиковать независимо от других, а в случае зависимости пакетов от других, библиотека Lerna автоматически обновляет и зависимые пакеты, и changelog измененного компонента с текстом коммита.
Мы познакомились с возможностями библиотеки Lerna и научились подключать версионирование пакетов к UI-Kit. Связка этих технологий упрощает паралелльную разработку и публикацию разных компонентов.
Александр, frontend developer
2022-05-20 14:48 Frontend NodeJS TypeScript FinTech ReactJS