Узнайте, какие варианты упростят вашу жизнь при попытке создать собственную библиотеку компонентов.
Поскольку фронтенд-разработка продолжает развиваться, React остается одной из самых популярных сред для создания пользовательских интерфейсов.
Один из лучших способов организовать компоненты, созданные с помощью React, и поделиться ими — использовать библиотеки компонентов. Таким образом, вы можете централизовать документацию, стили, обслуживание и буквально все, что связано с компонентами. В отличие от выпуска и ручного обмена случайными компонентами, которые вы считаете полезными.
В этой статье мы рассмотрим пять инструментов, которые помогут вам создавать собственные библиотеки компонентов React в 2023 году.
Пойдем!
1. Бит
Bit.dev (или Bit, как я буду называть его в дальнейшем) — это комплексная платформа, которая позволяет разработчикам создавать, совместно использовать и совместно работать над библиотеками компонентов React.
Несмотря на то, что он посвящен не только React, в этой статье мы будем интересоваться только этой частью.
Bit позволяет разработчикам либо создавать с нуля, либо брать существующий код и превращать его в то, что они называют «компонентами». Почему я использую здесь кавычки? Потому что для них компонент — это не просто код, который вы пишете, чтобы заставить его работать, он также включает в себя:
- Документация: каждый компонент Bit поставляется с файлом readme по умолчанию и примерами фрагментов, которые можно вставить и попробовать вживую в документации (после публикации на их платформе, bit.cloud). Узнайте больше здесь.
- Тесты. Каждый компонент Bit также сопровождается набором тестов, которые автоматически выполняются при выпуске новой версии компонента.
- Управление зависимостями. Bit предоставляет граф зависимостей для каждого компонента. В Bit Workspace вам не нужно указывать npm, pnpm или yarn, для каких компонентов необходимо установить зависимости, а также если это зависимость dev или prod. Bit динамически генерирует файлы package.json для каждого из них и может безболезненно с этим справиться. Это руководство покажет вам, как это сделать.
- Контроль версий: каждый компонент Bit имеет версию для вас. Вы можете указать номер версии при создании новой версии или позволить инструменту сделать это за вас. Это позволяет разработчикам обновлять компоненты в одном проекте, не затрагивая другие проекты, использующие тот же компонент.
Кроме того, учитывая то, что Bit предоставляет центральный репозиторий, где вы можете публиковать и находить компоненты для повторного использования, это способствует совместной работе. Все это путем абстрагирования сложного программного обеспечения, такого как Git, за их собственный инструмент CLI. Это значительно упрощает рабочий процесс разработки, поскольку все, что вам нужно запомнить, — это несколько команд, а все остальное инструмент сделает за вас.
Если вы хотите узнать больше, прочтите это руководство о том, как использовать Bit для создания собственной библиотеки пользовательского интерфейса:
2. Сборник рассказов
Storybook — еще один популярный инструмент, предназначенный для создания библиотек компонентов React. Он предоставляет разработчикам возможность разрабатывать и тестировать компоненты изолированно, что упрощает отладку и итерацию отдельных компонентов. Storybook включает в себя несколько надстроек, расширяющих его функциональность, включая поддержку тестирования и доступности.
Эта опция особенно полезна для создания автоматизированной документации для компонентов. Эта документация включает примеры, инструкции по использованию и даже фрагменты кода, которые можно копировать и вставлять непосредственно в проект. Storybook имеет богатую экосистему плагинов и интеграций, которые позволяют легко настраивать и расширять его функциональность.
С первого взгляда вам может быть интересно, в чем разница между Bit и Storybook. В конце концов, они оба занимаются визуальным аспектом процесса генерации компонентов. Другими словами, они отлично справляются с демонстрацией компонентов и добавлением визуально привлекательной документации.
Тем не менее, это почти все, что Storybook сделает за вас. Нет реальной поддержки управления версиями ваших компонентов или даже их распространения, как вы можете сделать с Bit.
Имейте в виду, если эти аспекты не являются частью вашей цели или вы согласны решать эти приоритеты с помощью других инструментов, то Storybook — фантастическое решение, иначе в нем могут отсутствовать некоторые столь необходимые функции.
3. Специалист по стилю
Styleguidist — генератор гидов по стилю. Это позволяет разработчикам создавать живую документацию для своих компонентов, предоставляя простой способ увидеть, как компоненты выглядят и ведут себя в различных контекстах.
Конечно, хотя вы не можете создавать настоящие компоненты с помощью Styleguidist, верно и то, что частью этой разработки является создание документации для вашей библиотеки.
С Styleguidist у вас есть все необходимое для создания очень подробной документации с минимальными усилиями. Имейте в виду, чем больше времени вы потратите на добавление деталей, тем полезнее это будет для других разработчиков.
Тем не менее, вы можете указать Styleguidist на свои компоненты, и он создаст документацию, просматривая разные вещи:
- Комментарии к вашему коду и теги doclet (например, получение внешних примеров путем анализа URL-адреса в теге
@external). - Обозначения типа пропса из вашего компонента. Особенно, если вы используете что-то вроде Flow или TypeScript.
- Любой файл с именем
readme.mdилиcomponentName.mdбудет проанализирован и показан. Если внутри есть блоки кода, они будут отображаться как компоненты React рядом с игровой площадкой, которую разработчики могут использовать, чтобы возиться с кодом и понимать, как работает каждый пример.
Styleguidist также поддерживает популярные фреймворки стилей, такие как CSS-in-JS и SASS, предоставляя простой способ поддерживать единообразный внешний вид всех компонентов.
В целом, Styleguidist — это фантастический инструмент, который охватывает только часть разработки вашей библиотеки компонентов React. Если вы используете что-то еще, чтобы позаботиться об остальном, попробуйте.
Понравилось ли вам то, что вы прочитали? Подпишитесь на мой БЕСПЛАТНЫЙ информационный бюллетень, где я делюсь со всеми своим 20-летним опытом работы в ИТ-индустрии. Присоединяйтесь к Бродяге старого разработчика!
4. Лерна
Если вы создаете библиотеку компонентов React, скорее всего, вы имеете дело с несколькими пакетами (или компонентами) внутри одного репозитория. В идеале вы хотели бы опубликовать все компоненты вместе, но если вы хотите развивать каждый компонент по отдельности и публиковать их отдельно, Lerna — отличный инструмент для проверки.
Lerna — это инструмент контроля версий, разработанный специально для управления многопакетными репозиториями. Это позволяет разработчикам управлять зависимостями и версиями для нескольких пакетов, упрощая создание и обслуживание крупномасштабных библиотек компонентов.
Одним из ключевых преимуществ Lerna является его способность автоматизировать многие ручные процессы, связанные с управлением репозиториями с несколькими пакетами.
Это включает в себя:
- Автоматизация версий. Вы можете просто запустить
lerna version, и он спросит, какую часть версии увеличить (используя semver). - Публикация пакетов. С
lerna publishвсе ваши пакеты автоматически отправляются в NPM. Это очень поможет, если вы хотите делать несколько релизов параллельно.
Если вам нужно публиковать и поддерживать отдельные версии ваших компонентов в вашей библиотеке, Lerna поможет упростить их обновление и поддерживать согласованный рабочий процесс для всех пакетов.
5. ТСДХ
Что, если вы не ищете ничего слишком сложного? Что, если вы просто хотите опубликовать свою простую библиотеку TypeScript, но простая идея настройки компилятора TS, сборщика и библиотеки тестирования вызывает у вас головную боль?
Вот где TSDX вступает в игру.
Это простая, но очень мощная утилита без кода, которая поможет вам настроить проект TypeScript и управлять им с помощью нескольких команд.
С помощью этого инструмента вы можете создать собственную библиотеку компонентов React и сразу же получить следующие преимущества:
- Простые шаги по установке и началу работы (просто создайте новый проект с помощью
npx tsdx create react-lib). - Линтинг интегрирован с
eslint. - Тестирование включено с использованием Jest.
- Свернуть как упаковщик.
- Режим разработки с поддержкой часов, что означает, что каждый раз, когда вы что-то меняете, все будет перестраиваться.
Сам по себе TSDX предоставляет очень простой рабочий процесс, которому вы можете следовать для создания и публикации своей библиотеки. Это определенно не очень полно, и вам не хватает таких аспектов, как документация или даже совместная работа, если вы не создаете это самостоятельно. Но если вы не ищете ничего более сложного, чем транспиляция, связывание и периодические автоматические тесты, то TSDX может быть именно тем, что вам нужно.
В 2023 году доступно несколько мощных инструментов для создания библиотек компонентов React. Нужна ли вам комплексная платформа, такая как Bit, или инструмент контроля версий, такой как Lerna, для каждого проекта найдется подходящий инструмент.
Конечно, есть много других инструментов, и я, возможно, оставил тот, который вы используете, из списка. В конце концов, учитывая, как экосистема JavaScript растет неделя за неделей, невозможно охватить все в одном списке.
Тем не менее, если у вас есть рекомендация, которую я пропустил, поделитесь ею в комментариях, чтобы другие могли узнать об этом.
Создавайте независимые системы проектирования и полностью повторно используемые библиотеки компонентов с помощью Bit
Инструмент с открытым исходным кодом Bit помогает более чем 250 000 разработчиков создавать приложения с компонентами.
Превратите любой пользовательский интерфейс, функцию или страницу в компонент многократного использования — и поделитесь им со своими приложениями. Легче сотрудничать и строить быстрее.
Разделите приложения на компоненты, чтобы упростить разработку приложений, и наслаждайтесь наилучшими возможностями для рабочих процессов, которые вы хотите:
