Совместное использование компонентов React с Bit

Уроки, извлеченные при публикации моего первого компонента реакции

В моей нынешней компании у нас есть три продукта с похожими компонентами и функциональностью. Во время нашего последнего спринта я посвятил некоторое время изучению того, как мы можем использовать https://bit.dev для совместного использования компонентов в этих проектах. Ниже приводится краткое изложение настройки и нескольких ошибок, с которыми я столкнулся на этом пути.

Настраивать

Документация по началу работы (https://docs.bit.dev/docs/quick-start) подробно описывает, как это сделать. Вот основные сведения:

Создать учетную запись bit.dev
Создать коллекцию
Инициализировать бит в проекте (не забудьте запустить bit login после установки bit-bin)
Рефакторинг компонента в предпочтительную битовую структуру
битовая сборка и битовый экспорт

Для начала я выбрал один из наших более сложных компонентов, потому что я обожаю наказания. Он сочетает в себе поисковый ввод с отображением списка результатов, где пользователь может выбрать один результат. Он делает немного больше за кулисами, но это основы.

Препятствие № 1 — Компилятор React по умолчанию не содержит всех плагинов Babel, которые мы используем в наших компонентах.

Мой компонент собран локально, но не собран после того, как я экспортировал его в свою коллекцию. Это привело к путанице и ругани. Наконец, я выяснил, что компилятор React для бита не включает те же .babelrc настройки, которые включены в react-scripts. Как только я понял это, мне потребовалось еще несколько часов, чтобы немного изменить компилятор реакции, чтобы включить плагины Babel, которые мне нужны.

Я мог бы изменить наш код, чтобы он не использовал этот синтаксис (в данном случае ?? нулевой оператор объединения), но это казалось дешевым исправлением, которое в конечном итоге вызовет больше проблем в долгосрочной перспективе.

Я не мог понять, как правильно использовать команду bit import для импорта компилятора и его изменения. Он продолжал приносить много дополнительных файлов, которые не имели для меня смысла. Вместо этого я разветвил репозиторий https://github.com/teambit/envs, вычистил ненужные мне компиляторы, модифицировал файл .babelrc в компиляторе react и экспортировал его в собственную коллекцию: https:// bit.dev/coterie/compilers/react-updated.

Оттуда я изменил свой исходный проект компонента, чтобы использовать новый компилятор вместо стандартного. Bit делает это довольно легко, обновив файл package.json:

"bit": {
  "env": {
    "compiler": "coterie.compilers/[email protected]"
  },
  ...
}

После этого я собрал свой компонент, пометил его новой версией и экспортировал в свою коллекцию битов:

bit build industry-search
bit tag industry-search (эта команда автоматически обновляет до следующего дополнительного номера версии)
bit export coterie.partner-ui

Как только компонент был экспортирован, я был готов использовать его в другом нашем проекте. Это был довольно простой процесс установки пакета с помощью npm и обновления родительского компонента для использования компонента из bit. Между проектами было немного времени, когда я понял, что нужно внести изменения. Однако внесение изменений в общий компонент было быстрым и легким. Наконец, я остановился на версии, которая работала в обоих проектах и включала в себя гибкость, которую можно было стилизовать так, как мне нужно для каждого из них.

Препятствие № 2. Чтобы установить битовый компонент с помощью npm, вам нужна битовая настройка учетной записи (т. е. системам CI нужна дополнительная настройка, чтобы заставить `npm install` работать)

У меня все работало локально, поэтому пришло время активировать коммит для проверки кода! Я нажал, и наш процесс сборки был запущен. Почти сразу провалился.

npm ERR! 404 Not Found - GET https://registry.npmjs.org/@bit%2fcoterie.partner-ui.industry-search - Not found

Это была моя ошибка. Мой пакет не может быть найден. ВТФ? Я удалил его и снова установил локально. Нет проблем. Я перешел в другой проект локально и снова установил. Опять же без проблем. Двойной ВТФ? Я зашел на канал #техподдержка в Slack и спросил об этом там. Через 15 минут пришел ответ:

Оказывается, я не читал документацию по настройке системы CI: https://docs.bit.dev/docs/ci#config-npmrc-on-ci

Я добавил файл .npmrc и настроил переменную env BIT_TOKEN. Проблема решена!

Организация рабочего процесса

Один из главных вопросов, который у меня возник в ходе этого эксперимента, касался рабочего процесса, который мы будем использовать. В документации по битам описано несколько вариантов для этого: https://docs.bit.dev/docs/workflows/workflows

На данный момент мы собираемся использовать рабочий процесс Ad-hoc / Project: https://docs.bit.dev/docs/workflows/projects, пока мы создаем нашу коллекцию компонентов. Вот описание из их документации.

Я надеюсь, что это было полезно для всех, кто ищет решение для совместного использования компонентов. В целом мой опыт очень положительный. Вместо этого я рассматривал возможность создания пакета node, но простота Bit cli, страницы хостинга компонентов (с документацией и примерами использования) и фантастическая поддержка со стороны их команды на данный момент убедили меня в том, что я использую Bit.

Я хотел бы услышать любые отзывы или предложения!

Совместное использование компонентов React с Bit