При разработке интерфейсов часто бывает лучше разбить любые общие элементы дизайна, такие как кнопки, поля формы и компоненты макета, на повторно используемые компоненты с четко определенными интерфейсами.
Таким образом, в следующий раз, когда вам понадобится создать пользовательский интерфейс, вы можете просто импортировать эти компоненты и избежать написания кода, который вы написали ранее.
Но что происходит, когда вы используете компоненты в разных приложениях и вносите изменения в одно из них? Используя Bit, вы можете импортировать компонент из одного проекта в другой, модифицировать его и объединять изменения между ними.
Пример
Недавно мне пришлось создать две веб-страницы с одинаковыми разделами Header и Footer. Вот предварительный просмотр этих двух проектов:
Таблица стилей
UIToRGB
В этом посте я покажу, как мне удалось импортировать свои компоненты из одного проекта в другой, а затем объединить изменения между ними с помощью Bit.
Настройка проекта
Сначала я создал два новых проекта React.
$ create-react-app stylesheetget $ create-react-app uitorgb
Сначала я построил дизайн проекта stylesheetget. В основном он состоит из трех компонентов:
HeaderFooterCode- Этот компонент содержит основные функции этого проекта.
Файловая структура моего проекта выглядит примерно так:
Теперь я хотел создать такие же верхний и нижний колонтитулы для моего второго проекта uitorgb.
Вот тут-то и пригодится Bit!
Установить бит
Сначала установите Bit в систему с помощью команды:
npm install bit-bin --global
Затем перейдите на домашнюю страницу Bit и создайте учетную запись. После создания учетной записи я создаю новую область для размещения компонентов. Как только область видимости создана, нам нужно инициализировать бит в проекте.
Чтобы инициализировать bit в вашем новом проекте, откройте командный терминал и введите:
$ cd stylesheetget $ bit init --standalone
Я использовал флаг --standalone, потому что не хочу, чтобы бит создавал свою локальную область видимости внутри каталога .git моего проекта.
Компоненты отслеживания
Раньше я мог экспортировать свои компоненты в другой проект, мне нужно было сказать Bit отслеживать их. Таким образом, он может изолировать компоненты, которые я хочу экспортировать, от остальной части проекта.
Что замечательно в отслеживании, так это то, что Bit сканирует весь каталог проекта и воссоздает новую среду, содержащую отслеживаемые компоненты и любые зависимости, которые требуются компонентам для правильного функционирования.
Чтобы сообщить Bit отслеживать компоненты Header и Footer, используйте команду:
$ bit add src/components/Header src/components/Footer tracking two new components
Чтобы убедиться, что Bit изолировал эти два компонента от остальных, введите:
$ bit status > components/footer ... ok > components/header ... ok
Когда Bit указывает, что статус компонента - ok, это означает, что все зависимости, необходимые для компонентов, были добавлены в новую среду.
Подтвердить этап сборки
Поскольку этот проект основан на React, нам нужно настроить этап сборки нашей изолированной среды. Просто введите в командном терминале следующее:
$ bit import bit.envs/compilers/react --compilerЕсли вы откроете файл bit.json, вы увидите, что мы импортировали компилятор для этого проекта.
Пометить и экспортировать компоненты в Scope
Наконец, мы отметим компоненты версией и экспортируем их в Scope. Используйте команду:
bit export <username>.stylesheetget
Если все пойдет как надо, ваш прицел на Bit будет выглядеть примерно так:
Импорт компонентов в другой проект
Теперь я хочу импортировать эти компоненты в другой проект с именемuitorgb. Это довольно просто.
Во-первых, нам нужно убедиться, что другой проект также инициализирован с помощью bit. Просто следуйте инструкциям, которые я упомянул в предыдущем разделе.
Войдите в папку src проекта и выполните команду битового экспорта:
$ cd uitorgb $ bit init $ bit export bit import <username>.stylesheetget/components/header --path src/components $ bit export bit import <username>.stylesheetget/components/footer --path src/components
Если вы не укажете path, bit по умолчанию добавит эти компоненты в корневой каталог проектора.
С помощью этих 4 команд я экспортировал два компонента из stylesheetget в uitorgb.
Внесение изменений в код
Давайте посмотрим на код Header компонента stylesheetget.
Очевидно, что если я импортирую этот код в uitorgb, мне нужно внести несколько изменений, например изменить текст внутри тегов <h1> и <h2>. Так что давай сделаем это.
Экспорт новой версии в Bit
Теперь вы можете экспортировать эти изменения в код, так что вам не придется снова писать это в другом проекте.
Чтобы экспортировать новый код в Bit, сначала отметьте компонент новой версией, а затем запустите bit import command.
$ bit tag components/header 1.0.1 $ bit export rajat.stylesheetget exported 1 component to scope geekrajat.stylesheetget
Если вы сейчас откроете компонент Header в своей области видимости, вы увидите, что существует две версии кода!
Как объединить изменения компонентов
Слияние новых обновлений с компонентом в Bit довольно просто. Если локальная версия компонента была изменена, то запуск команды bit import автоматически перенесет измененную версию компонента в удаленную Scope.
$ bit importsuccessfully imported 2 components - up to dategeekrajat.stylesheetget/components/footer- updatedgeekrajat.stylesheetget/components/footercontains new versions: 1.0.1
Запуск bit status сообщит вам, используете ли вы последнюю версию компонента. Чтобы изменить версию компонента, который вы в настоящее время используете в своем проекте, запустите эту команду в своем терминале:
bit checkout <version> <component name>
Обработка конфликтов слияния
В некоторых случаях входящие изменения могут вызвать конфликт слияния. Чтобы разрешить этот конфликт, Bit будет использовать Git, чтобы попытаться разрешить его автоматически. Когда это невозможно, Bit позволит вам вручную разрешить конфликт в вашем коде.
$ bit import
error: merge conflict occurred while importing the component geekrajat.stylesheetget/components/header. conflict version(s): 1.0.2
to resolve it and merge your local and remote changes, please do the following:
1) bit untag geekrajat.stylesheetget/components/header 1.0.2
2) bit import
3) bit checkout 1.0.2 geekrajat.stylesheetget/components/headerКак только вы запустите команду bit checkout, как указано выше, ваш конфликт слияния должен быть разрешен. Но все же есть некоторые шансы, что этого не произойдет, и вы можете получить подсказку, как показано ниже:
bit checkout 1.0.2 geekrajat.stylesheetget/components/header
automatic merge has failed for component geekrajat.stylesheetget/components/header.
please use "--manual" to manually merge changes or use "--theirs / --ours" to choose one of the conflicted versionsЗдесь Bit просит вас решить, как разрешить конфликт, используя один из трех вариантов:
--theirs- удаленная версия отменяет локальные модификации.--ours- локальная реализация отменяет удаленные изменения.--manual- разрешить конфликт вручную.
Первые два варианта довольно просты. Итак, давайте посмотрим, как можно разрешить конфликт вручную, добавив флаг --manual к команде bit checkout.
$ bit checkout 1.0.2 geekrajat.stylesheetget/components/header --manual
successfully run npm install at ...
successfully switched geekrajat.stylesheetget/components/header to version 1.0.2
updated src/components/header.spec.js
updated src/components/index.js
CONFLICT src/components/index.js automatic merge failed. please fix conflicts manually and then tag the results.Разрешите конфликты в указанном файле, Bit откроет ваш инструмент слияния и представит вам конфликтующие файлы, чтобы вы могли разрешить конфликт. После решения запустите bit status и bit tag, чтобы убедиться, что изменения были объединены (компонент изменен).
$ bit status
modified components
(use "bit tag --all [version]" to lock a version with all your changes)
> components/header ... okТеперь вы можете просто bit tag использовать компонент с новой версией и, при необходимости, export его на удаленный Scope.
$ bit tag --all
Синхронизация компонентов
Помимо упрощения превращения любого компонента в пакет для установки с помощью NPM, Bit также позволяет импортировать компоненты в различные проекты и продолжать их разработку.
Хотя этот рабочий процесс очень полезен для обслуживания и обновления ваших компонентов, он также означает, что вы можете иметь одни и те же компоненты с различными изменениями в разных проектах.
Чтобы управлять этими изменениями и синхронизировать их, Bit позволяет отслеживать и объединять изменения в компонентах, используя рабочий процесс слияния Git, помогая вам использовать компоненты где угодно, сохраняя их синхронизацию.
Это все, ребята!
Спасибо за прочтение этого поста! Пожалуйста, 👏 если вам понравилась эта статья, и оставьте свои отзывы ниже, чтобы сообщить мне, что вы думаете.
Также интересно узнать о stylesheetget? Это небольшой инструмент, который поможет вам преобразовать встроенные стили в React native в таблицу стилей. Попробуйте здесь:
Учить больше:
