Автор: @杨泽迪
Обычно при ежедневной разработке вы накапливаете множество бизнес-компонентов, будь то создание собственных колес или их инкапсуляция на основе превосходной библиотеки компонентов. Со временем компонентов становится все больше и больше, и управление этими бизнес-компонентами и их совместное использование могут стать бременем. Бит, представленный в этой статье, предоставляет новое решение для этого сценария.
Что такое Бит?
Bit использует компоненты, чтобы сделать их не только повторно используемыми в приложениях, но и предоставляет экосистему для совместного использования компонентов между приложениями и репозиториями.
Бит — это инструмент, который можно использовать в разных проектахобщийа такжеСинхронизироватькомпоненты.
Bit упрощает процесс совместной работы над компонентами пользовательского интерфейса, члены команды могут совместно использовать, поддерживать и синхронизировать изолированные компоненты из разных проектов.
Как работает Бит?
Эта статья начнется с трех модулей:Компоненты,жизненный цикл компонента,Битовый рабочий процессВ чем разница между Bit и традиционным управлением библиотеками компонентов?
Компоненты
Для каждого компонента Bit хранит три элемента
-
Исходный код (включая тесты и документацию)
-
Содержимое компонента — это не только сам исходный код, но также могут включать другие связанные файлы, такие как файлы стилей, активы (изображения, шрифты), тестовый код, документацию.
-
график зависимости
-
При добавлении источника к компоненту Bit анализирует все содержащиеся в нем зависимости (т. е. операторы import и require в коде).
-
Графы зависимостей делают компоненты независимыми и позволяют перемещать компоненты по проекту без потери каких-либо ссылок.
-
элемент конфигурации
-
Компилятор, бит предоставляет компилятор bit.envs/compilers/react@1.0.14
-
Tester, расширение, предоставляемое битом для запуска тестов, связанных с компонентом, и возврата статуса.
Исходный код несколько похож на часть исходного кода исходной библиотеки компонентов, карта зависимостей аналогична карте, сгенерированной webpack на этапе анализа импорта зависимостей, а элементы конфигурации аналогичны webpack.config.js. помочь вам упаковать и скомпилировать компоненты, так что здесь можно увидеть, что часть причины, по которой Bit может так легко выполнить упаковку компонентов, заключается в том, что Bit сделал для нас работу по упаковке и компиляции библиотеки компонентов.
жизненный цикл компонента
производственные компоненты
Производственный компонент имеет три действия,трек, версия, экспорт.
- Track: Указывает составной файл компонента в рабочей области.
- Version: пометка версии блокирует содержимое и метаданные файлов этой версии. Если компонент имеет компилятор, Bit создает компонент и блокирует построенный компонент (подумайте об этом как о коммите git и выпуске npm, которые происходят одновременно).
- ExportКоманда : export создаст уникальный идентификатор для компонента. Уникальными идентификаторами являются имя удаленной области и имя локального компонента.Имя удаленной области может включать любое пространство имен (username.collection?.namespace).Бит.Дев/Ян Чжэди/Хе…
потребительские компоненты
После загрузки на удаленный сервер компонент доступен для других рабочих пространств. Компоненты можно использовать с помощью установки или импорта.
- Install: Bit добавит компонент в папку node_modules как обычный пакет NPM. Когда компонент установлен (bit install / npm install / yarn add), компонент будет добавлен в package.json с указанием установленной версии: "@bit/yangzhedi.test.list": "0.0.1". Не изменяет код установленных компонентов.
import List from '@bit/yangzhedi.test.list';
- Import:Bit добавит компонент в папку workspace-components и отследит его модификации. При импорте видно, что package.json указывает на локальный файл: "@bit/yangzhedi.test.list": "file:./components/list",
- Отслеживайте модификации кода и экспортируйте их как новые версии.выбрасывать: если экспортируется новая версия, вы можете вернуться к установленному компоненту. В этом случае package.json будет обновлен до "@bit/yangzhedi.test.list": "0.0.2"
Bit workflow
Специальный обмен
_ | _
Этот рабочий процесс применяется к:
-
Есть несколько продуктов с библиотеками компонентов пользовательского интерфейса.
-
Требуется согласованный UI/UX для всех проектов.
-
Нет времени/возможностей для формирования специальной команды для обслуживания компонентов.
преимущества
-
Вместо того, чтобы тратить долгие часы на создание и поддержку общих библиотек для компонентов пользовательского интерфейса, делитесь компонентами, уже разработанными в существующих проектах.
-
Используйте bit.dev в качестве портала для обнаружения, который собирает все компоненты портала, включая демонстрации и документацию.
-
Изменения в коде компонентов можно вносить в любой проект, локальные модификации компонентов в используемом проекте можно сохранять и по-прежнему объединять с поступающими обновлениями.
-
Компоненты можно устанавливать с помощью npm/yarn, поэтому они вписываются в обычный рабочий процесс разработчика проекта.
риск
- Стандартный процесс экспорта компонентов
Централизованная библиотека
Этот рабочий процесс применяется к:
-
Нужен централизованный репозиторий для общих компонентов пользовательского интерфейса.
-
Выделенная команда для управления общими компонентами пользовательского интерфейса
-
Есть несколько проектов, использующих общие компоненты
преимущества
-
для производителей
-
Bit автоматически упаковывает каждый компонент с более высокой степенью детализации без дополнительных затрат на поддержку отдельных пакетов, автоматическое управление версиями компонентов на основе изменений в зависимостях компонентов.
-
Создание компонента локально без контекста проекта сокращает цикл обратной связи о том, как компонент вызывается в других проектах.
-
Публикация компонентов на сайте bit.dev делает их видимыми для всех команд, что способствует внедрению компонентов. Bit помогает контролировать, кто изменяет компоненты.
-
для потребителей
-
Получите меньшие дискретные компоненты, необходимые для каждого проекта, чтобы: Уменьшить размер пакета вашего приложения.
-
Могут привезти только те компоненты, которые им нужны. Уменьшите окончательный размер пакета и время сборки.
-
Более детализированные библиотеки компонентов вызовов могут повысить стабильность проекта.
риск
- Если есть команда, занимающаяся поддержкой единой библиотеки компонентов, слишком высокая степень детализации может стать бременем.
Чем он отличается от нпм?
-
Bit автоматизирует упаковку кода на основе анализа кода.
-
Bit может получить доступ к пакетам (импорт битов), не выходя из контекста проекта.
-
Для производителей они могут загружать напрямую, не копируя компоненты по отдельности.
-
Для потребителей, если вы хотите изменить компоненты, вам не нужно клонировать библиотеку компонентов, но вы можете изменить их непосредственно в проекте.
-
Bit может использовать компонентный код в любом проекте, а затем вносить изменения прямо в него.
Выше в этой статье в основном рассказывается об использовании бит cli, бит также предоставляет аналогичныйnpm.orgВеб-сайт платформы: bit.dev, и вы можете напрямую увидеть стиль и метод вызова компонентов на bit.dev, и вам даже не нужно писать документы самостоятельно.
Ссылаться на:
Прием на работу
Команда коммерческого интерфейса ByteDance набирает сотрудников! Вы можете каждый день говорить о своих идеалах с техническими лидерами мнений, участвовать в обмене и обмене техническими гигантами, наслаждаться четырехразовым питанием, лучшим гиковским оборудованием, бесплатными тренажерными залами и заниматься сложными делами с отличными людьми.Где вы можете найти такое место? ? Присоединяйтесь к нам!
Электронная почта для доставки резюме: yangzhedi@bytedance.com