Портфолио, проекты и кейсы Creative

Настройка публикаций 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
Frontend NodeJS TypeScript FinTech ReactJS