Создайте действительно модульную библиотеку компонентов, которую можно будет разрабатывать и использовать по одному компоненту за раз.
Когда вам нужно совместно использовать общие компоненты пользовательского интерфейса (React, Vue, Angular и т. Д.) Между разными проектами или приложениями, вы часто создаете общую библиотеку пользовательского интерфейса.
Основное преимущество этого заключается в том, что вы можете группировать компоненты вместе и избегать огромных накладных расходов, связанных с несколькими репозиториями. Проблема в том, что они остаются сгруппированными при их разработке, установке и обновлении.
Если у вас есть эффективный способ версии, публикации, установки и обновления отдельных компонентов, жизнь каждого станет намного проще. Вы, как разработчик библиотеки, имеете больше свободы при разработке каждого компонента и можете управлять графом зависимостей между компонентами, разработанными в библиотеке.
Люди, которые устанавливают библиотеку (вы или другие разработчики приложений), могут выбирать и использовать только те компоненты, которые им действительно нужны, и получать обновления только для этих компонентов, а не для всей библиотеки.
В этом посте мы узнаем, как использовать компонентно-ориентированные инструменты, такие как Bit, чтобы это произошло, без необходимости начинать рефакторинг вашей библиотеки. Это также обеспечит другие преимущества для вашей библиотеки, такие как возможность обнаружения компонентов и возможность организовывать общие коллекции для разных команд / проектов.
Зачем разрабатывать отдельные компоненты?
Разработка: вы можете использовать Bit, чтобы изолировать каждый компонент как отдельный модуль в вашей библиотеке, включая все его файлы и зависимости. Вы можете редактировать каждый компонент по отдельности или вместе. Поскольку Bit позволяет вам управлять графиком зависимостей для всех компонентов в проекте, вы можете разработать каждый компонент и точно узнать, как вносимые вами изменения влияют на другие компоненты в репо, чтобы вы могли обновлять все, что требует обновления. Затем вы можете опубликовать каждый компонент по отдельности для повторного использования в другом месте.
Потребление: вы и другие пользователи можете установить каждый компонент по отдельности, используя npm / yarn как отдельный пакет. Когда потребляющему проекту требуются изменения, вы можете импортировать исходный код любого компонента прямо в этот проект, чтобы внести изменения. Затем вы можете просто обновить и поделиться новой версией. Это означает совместную работу с несколькими репозиториями в одной команде.
Обновления: пользователи могут получать обновления только для используемых компонентов, без необходимости вносить обновления для всей библиотеки. Они также могут предлагать обновления для любого компонента, не углубляясь в библиотеку. Это означает большее принятие вашей библиотеки разработчиками, использующими компоненты.
Обнаруживаемость: вы можете создать общую коллекцию bit.dev, в которой все ваши компоненты будут доступны для всех, чтобы они могли их обнаружить, использовать и совместно работать над ними. Это выходит даже за рамки просто разработчиков, так как вы можете делиться компонентами с другими людьми, такими как маркетинг, продукт, дизайн и т. Д., Чтобы узнать, что у вас есть. Вы можете визуализировать каждый компонент, поиграть с примерами, просмотреть автоматически извлеченную ссылку на API, запустить изолированный процесс сборки / тестирования для каждого компонента и многое другое.
Изолируйте, версируйте и публикуйте отдельные компоненты из библиотеки
Давайте воспользуемся Bit для модульной разработки и распространения компонентов в нашей библиотеке. Он сделает за нас тяжелую работу и предоставит нам контроль над точным состоянием графа зависимостей каждого компонента в любой момент.
Это инструмент, созданный для совместного использования компонентов. Давайте использовать его для отслеживания различных компонентов в нашей библиотеке. Он проанализирует каждый из них и упакует в изолированную капсулу со всеми файлами и зависимостями компонента. Затем мы сможем версии, опубликовать и позже обновить каждый компонент по отдельности.
Во-первых, давайте быстро настроим Bit для вашей библиотеки.
Установите Bit и создайте рабочее пространство для проекта вашей библиотеки:
$ npm install bit-bin -g$ cd project-directory $ bit init
Затем перейдите на bit.dev и быстро создайте бесплатную учетную запись. Затем создайте коллекцию для размещения ваших компонентов (и сделайте их доступными для обнаружения).
Когда закончите, аутентифицируйте бит в своей учетной записи bit.dev:
$ bit loginБольшой! Теперь вы готовы к отслеживанию компонентов. Используйте команду bit add, чтобы сообщить Bit, где найти компоненты в вашей библиотеке.
Например, давайте отследим все компоненты в src/components. В этом случае мы будем использовать шаблон глобуса, чтобы сообщить Bit отслеживать все компоненты в этом каталоге.
$ bit add src/components/*Теперь запустите bit status и убедитесь, что компоненты отслеживаются, и этот бит не пропустил файл или зависимость для любого из компонентов.
Затем давайте импортируем компилятор для встраивания кода в файлы, которые могут работать и в других проектах. Например, воспользуемся установкой React compiler в рабочую область:
$ bit import bit.envs/compilers/react
Теперь вы можете запустить bit build, чтобы убедиться, что все работает нормально.
Далее установим версию для компонентов. Bit будет версировать каждый компонент с дополнительной версией, но вы можете переопределить и выбрать свои собственные версии. Установка независимой версии для каждого компонента очень полезна для разработки, публикации, установки и обновления их по отдельности.
Для начала установим все на v1.0.0. Позже мы можем использовать Bit для обновления отдельных компонентов, контролируя отношения зависимости между ними.
$ bit tag --all 1.0.0Затем запустите быстрый bit status, чтобы
Теперь вы готовы опубликовать компоненты в bit.dev:
$ bit export <your-user-name>.<your-collection-name>Вот и все! Теперь перейдите в свою коллекцию и исследуйте компоненты. Теперь к каждому из них можно добавить сохраненный пример, который bit.dev будет отображать и представлять для компонента. Примеры также помогут сгенерировать предварительный просмотр снимка bit.dev, представленный в коллекции компонентов, чтобы помочь вам сделать выбор.
Например, если вы разделяете библиотеку semantic-ui-react, вы можете включить это:
В эту коллекцию индивидуально повторно используемых компонентов. Обратите внимание, что теперь вы даже можете увидеть точный размер пакета и зависимости каждого компонента.
А вот пример страницы компонента, на которой вы можете поиграть с кодом, увидеть отрисовку компонента и установить компонент с помощью npm / yarn.
Затем давайте посмотрим, как устанавливать и позже обновлять отдельные компоненты в разных проектах, не загружая всю библиотеку.
Установить отдельные компоненты из библиотеки
Когда вы заходите на страницу компонента в bit.dev, вы видите панель с различными способами использования компонента. Давайте посмотрим на компонент перехода из semantic-ui-react:
На странице bit.dev вы можете сказать, что он весит всего 73 КБ и имеет несколько зависимостей, включая Lodash. Это немного, но, по крайней мере, теперь я точно знаю, что добавляю в свое приложение, еще до того, как фактически установлю компонент.
Если вы уже используете bit login, ваш клиент npm настроен на bit.dev как реестр с ограниченным объемом. Если нет, выполните для этого следующую команду:
npm config set '@bit:registry' https://node.bit.devЗатем просто установите компонент с помощью npm / yarn:
npm i @bit/semantic-org.semantic-ui-react.transition # or yarn add @bit/semantic-org.semantic-ui-react.transition
Вот и все. Я только добавил компонент в свое приложение, и мне не нужно было устанавливать целую библиотеку. Например, в вашей организации это может помочь расширить внедрение создаваемых вами общих библиотек и сделать ваши приложения быстрыми и компактными.
Обновить отдельные компоненты в библиотеке
Когда вы обновляете компонент в библиотеке, вы можете просто пометить его снова, а затем экспортировать его как новую версию в свою коллекцию bit.dev. Перед этим вы даже можете запустить `bit status`, чтобы узнать, какие другие зависимые компоненты будут затронуты изменениями и как.
Затем потребитель компонента может просто внести обновления для компонентов, которые он фактически использует, без необходимости обновлять всю библиотеку.
Более того, люди, использующие компоненты, могут использовать команду bit import, чтобы внести реальный исходный код компонента в любое репо. Там они могут локально внести изменения в код и пометить новую версию. Новая версия может оставаться локальной или может быть снова опубликована в коллекции. При экспорте вы можете передать флаг --eject, чтобы переместить измененный компонент обратно в зависимость от пакета в вашем package.json файле.
Затем обновленную версию можно перенести в любое другое хранилище, включая исходную библиотеку. Поскольку Bit использует Git под капотом, вы можете использовать Утилиту слияния Git для объединения изменений между разными версиями ваших компонентов в одном локальном рабочем пространстве Bit, чтобы легко синхронизировать изменения кода между репозиториями.
С предстоящей интеграцией GitHub-sync они также могут использовать этот рабочий процесс для отправки запроса на перенос в вашу библиотеку в GitHub. Это может помочь в освоении вашей библиотеки и обеспечить совместный рабочий процесс для всех.
Обнаружение компонентов и сотрудничество
Теперь, когда вы поделились своей библиотекой с bit.dev, ваша коллекция становится общим порталом, через который ваша команда может делиться повторно используемыми компонентами.
Вы можете искать и исследовать компоненты с помощью семантического поиска, фильтровать соответствующие параметры, такие как контекстные метки или размер пакета компонентов, и позволять различным людям и командам сотрудничать над вашими общими компонентами.
Разработчики библиотек получают лучший контроль над разработкой и распространением компонентов в библиотеке, а также улучшенные возможности обнаружения и совместной работы над своими компонентами. Потребители компонентов могут легко находить и устанавливать компоненты, одновременно получая и предлагая обновления прямо из своих проектов.
Это означает, что вы можете быстрее создавать приложения с помощью модульных компонентов, которые публикуются, устанавливаются и обновляются в разных проектах. Надеюсь, это поможет, поэтому не стесняйтесь и попробуйте или изучите руководства. Ура и не стесняйтесь задавать любые вопросы ниже. 👐
