Как я делюсь компонентами и управляю общими библиотеками с помощью Bit

Я люблю NPM и Лерна полезна. Бит - совсем другой зверь… Поделюсь своим опытом.

NPM традиционно является онлайн-реестром для совместного использования кода от фрагментов, компонентов до полных фреймворков (Angular, React и т. Д.). Хотя у него есть недостатки, я использую NPM каждый день.

Это помогает нам создать пакет для библиотеки и отправить его в онлайн-базу данных NPM, поэтому, когда мы чувствуем необходимость в нашем проекте использовать те же функциональные возможности, мы можем установить пакет из NPM.

Допустим, мы в команде создаем приложение для обмена. Приложение состоит из множества уровней компонентов. Наша структура папок будет организована следующим образом:

exchg_app
 - node_modules/
 - src/
  - Delivery-Page.js
  - Delivery-List.js
 - App.js
 - index.js
 - package.json

Страница Delivery-Page.js отобразит страницу Delivery-List.js, которая будет содержать список доставок, заказанных клиентами. Теперь давайте представим, что нам нужен Delivery-List.js как независимый компонент, который можно повторно использовать в нескольких проектах. Как мы это делаем?

Мы создаем новое репо shared-compos, которое содержит Delivery-List.js и его зависимости:

shared_compos
 - node_modules/
 - src/
   - Delivery-List.js
   - index.js
 - package.json
 - rollup.config.js
 - .gitignore
 - .npmignore
 - .babelrc

Теперь мы npm publish shared_compos в NPM и устанавливаем его в наш проект, когда мы хотим использовать Delivery-List в любом проекте.

npm i shared_compos
react-prj
 - node_modules/
  - shared_compos/
   - dist/
    - delivery-list.min.js
   - package.json
  ...
 - src/
   - Display.js
   - index.js
   - App.js
   - App.css
   - index.css
 - package.json
 - .gitignore
{
    ...
    dependencies: {
        shared_compos: "^0.01"
        ...
    }
}

Мы опубликовали shared_cmpos в NPM и установили его в проекте react-prj. При этом мы можем использовать компонент Delivery-List в react-prj.

Вы заметили что-нибудь в этом подходе?

Если эта функция написана в более крупном репозитории, нам придется провести рефакторинг репо, чтобы разделить его и создать правильные конфигурации и среды.
Для любых изменений в Delivery-List в shared_compos нам нужно будет повторно опубликовать пакет и переустановить его в react-prj. Это часто означает привязку разработки нашего приложения к сторонней библиотеке.
Конфликт версий, одна версия модуля пакета может конфликтовать с предыдущей версией, и отказ от методов и функций серьезно повлияет на рабочий процесс и разработку.
Мы увеличиваем размер приложения из-за дополнительных файлов в shared_compos библиотеке: package.json, _17 _, _ 18_.

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

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

Bit будет автоматизировать и обрабатывать все за меня, от управления версиями небольшого пакета до автоматического разрешения всех его зависимостей. Это не черная магия, и вы можете узнать о ней здесь. В результате получается невероятно быстрый рабочий процесс с минимальными усилиями для совместного использования повторно используемого кода в проектах.

Совместное использование повторно используемого кода с Bit

Bit решает все риски и накладные расходы, с которыми мы традиционно сталкиваемся при использовании NPM, который был создан для совместного использования более крупных библиотек в виде пакетов.

Bit дает нам возможность:

Мгновенно «изолируйте» функции или компоненты как повторно используемые модули прямо из любой структуры репо и среды - без какого-либо рефакторинга.
Сведите к нулю усилия по управлению зависимостями и версиями общего кода.
Установите в любом другом проекте с NPM и Yarn.
Используйте Bit для разработки кода прямо из любого потребляющего проекта, так что изменение пакета становится вопросом секунд.

Лерна пришел с решением для создания монорепозиториев и символических ссылок на монорепозитории без принудительной публикации в NPM. Очень хорошо, но дело в том, что он по-прежнему позволяет создавать монорепозитории, то есть дополнительный проект Node. Bit позволяет нам обмениваться компонентами или утилитами без дополнительного создания папок проекта или конфигураций. Звучит много, но это довольно просто.

Компоненты / утилиты, подлежащие повторному использованию, используются напрямую из существующего проекта без какого-либо рефакторинга.

Обнаружение компонентов и совместная работа · Bit
Bit - это место, где разработчики обмениваются компонентами и совместно создают потрясающее программное обеспечение. Откройте для себя общие компоненты… bit.dev

Давайте рассмотрим демонстрацию проекта exchg_app:

exchg_app
 - node_modules/
 - src/
  - Delivery-Page.js
  - Delivery-List.js
 - App.js
 - index.js
 - package.json

Мы можем поделиться компонентом Delivery-List.js из этой папки напрямую, не создавая для него другой проект или не выполняя рефакторинга. Все, что нам нужно, это установить бит глобально:

npm i bit-bin -g

Инициализировать рабочую область Bit в проекте:

cd project directory
bit init

Теперь отслеживаем компонент Delivery-List.js:

bit add src/Delivery-List.js

На этом этапе Bit автоматически идентифицирует и разрешит все зависимости функции: пакеты, другие файлы и т. Д. И создаст изолированный компонент.

Затем давайте воспользуемся bit tag, чтобы заблокировать версию компонента.

bit tag -a 1.0.0

Создайте учетную запись Bit на bit.dev и создайте коллекцию. Теперь экспортируйте список доставки в свою коллекцию:

bit export <BIT_ACCOUNT_NAME_HERE>.<COLLECTION_NAME_HERE>

Теперь, если мы хотим использовать компонент в проекте react-prj, мы просто импортируем такой компонент прямо из концентратора Bit.

bit import <BIT_ACCOUNT_NAME_HERE>.<COLLECTION_NAME_HERE>/Delivery-List --path src

NB: также можно использовать ваш любимый менеджер пакетов NPM или yarn для установки компонентов, которые вы публикуете с помощью Bit!

Response-prj будет выглядеть так:

react-prj
 - node_modules/
  ...
 - src/
   - components/
    - Delivery-List.js
   - Display.js
   - index.js
   - App.js
   - App.css
   - index.css
 - package.json
 - .gitignore

Смотрите, Никакой дополнительной вставки в node_modules сложности. Файл (component / util) только добавляется в проект.

Совместное использование библиотеки как повторно используемых компонентов

Допустим, у вас есть библиотека компонентов NPM, уже опубликованная в реестре NPM, например наша shared_compos, которая содержит компонент Delivery-List.

Вы можете покончить с библиотекой и опубликовать компонент Delivery-List исключительно в реестре Bit. Таким образом, вы можете импортировать компонент напрямую без дополнительных файлов и раздувания в node_module (через зависимости).

У нас есть проект shared_compos:

shared_compos
 - node_modules/
 - src/
   - Delivery-List.js
   - index.js
 - package.json
 - rollup.config.js
 - .gitignore
 - .npmignore
 - .babelrc

Устанавливаем битовую утилиту и инициализируем битовую среду:

npm i bit-bin -g
bit init

Затем мы отслеживаем и размещаем компонент Delivery-List. Это сообщает Bit, что это единственный файл, который мы хотим экспортировать в его реестр.

bit add src/Delivery-List

Netx, помечаем компонент Delivery-List

bit tag -a 1.0.0

Теперь создайте коллекцию в своей учетной записи Bit и экспортируйте компонент:

bit export <BIT_ACCOUNT_NAME_HERE>.<COLLECTION_NAME_HERE>

Перейдите в панель управления коллекцией, и вы увидите, что там отображается список доставки.

Видите ли, мы изолировали единственный главный компонент из shared_compos библиотеки и разделили его по отдельности. Не будет необходимости во всех этих файлах и папках: .npmignore, package.json, .gitignore, node_modules и т. Д.

Когда мы хотим использовать Delivery-List в любом проекте, мы просто импортируем компонент:

До bit import:

react-prj
 - node_modules/
  ...
 - src/
   - Display.js
   - index.js
   - App.js
   - App.css
   - index.css
 - package.json
 - .gitignore
bit import <BIT_ACCOUNT_NAME_HERE>.<COLLECTION_NAME_HERE>/Delivery-List --path src

После bit import:

react-prj
 - node_modules/
  ...
 - src/
   - components/
    - Delivery-List.js
   - Display.js
   - index.js
   - App.js
   - App.css
   - index.css
 - package.json
 - .gitignore

Только компонент не скачивает лишних файлов и папок в node_modules папке.

Чего мы здесь достигли? Мы просто взяли UI-библиотеку и разделили ее как компонент, чтобы мы могли использовать ее с нулевыми накладными расходами.

Совместное использование моей библиотеки React `TimerComponent` как компонента

В одном из своих предыдущих постов я писал о том, как опубликовать компонент React в NPM. В этой статье я продемонстрировал, как использовать множество технологий для написания компонента React и передачи его в NPM.

Свернуть
Вавилон
НПМ

Ниже находится папка проекта компонента React.

Посмотрите так много файлов и папок (особенно node_modules), созданных, чтобы мы могли опубликовать компонент в NPM. А при установке для использования в проекте React все папки (node_modules) и файлы будут загружены NPM.

Здесь мы увидим, как выделить TimerComponent и поделиться им с Bit прямо из папки countdown-timer. Bit будет разрешать свои зависимости, устанавливать и управлять их версиями, а также превратить этот процесс в прогулку по парку.

Перейдем в папку countdown-timer:

cd countdown-timer

Установите Bit и инициализируйте рабочее пространство Bit:

npm i bit-bin -g
bit init

Нам нужно реструктурировать папку src, чтобы добавить подкаталог countdown. Мы помещаем все файлы в папку src в папку countdown с файлом index.js и экспортируем компонент в папку index.js.

...
 - src
  - countdown
   - countdown.css
   - coundown.js
   - index.js
...
// index.js
export { CountDown } from './countdown.js'

Таким образом, Bit будет отслеживать компонент как каталог.

Таким образом, мы должны подготовить и отслеживать компонент обратного отсчета.

bit add src/**/

Звездочка * сообщает Bit, что нужно подготовить и отслеживать все файлы в папке src.

Мы помечаем компонент, чтобы Bit заблокировал наш компонент версией.

bit tag -a 1.0.0

Мы их экспортируем

bit export <BIT_ACCOUNT_NAME_HERE>.<COLLECTION_NAME_HERE>

Мы поделились компонентами библиотеки таймера обратного отсчета с Bit. Поэтому, когда у нас возникает необходимость использовать обратный отсчет в нашем проекте React, мы просто импортируем компонент:

bit import <BIT_ACCOUNT_NAME_HERE>.<COLLECTION_NAME_HERE>/countdown --path src
react-prj
 - node_modules/
  ...
 - src/
   - components 
    - countdown
     - countdown.js
     - countdown.css
     - index.js
   - index.js
   - App.js
   - App.css
   - index.css
 - package.json
 - .gitignore

Совместное использование служебной библиотеки

Мы также можем поделиться файлом, содержащим наши служебные функции. Возможно, в нашем проекте у нас есть файл util.js, содержащий функции, которые многократно выполняют некоторые базовые / сложные операции.

У нас есть такой проект:

react-app
 - node_nodules/
 - src/
  - utils/
    - toString/
     - index.js
    - looseIdentical/
     - index.js
    - indexOf/
     - index.js
  - App.js
  - App.css
  - index.js
  - index.css
 - package.json

Папка utils содержит подпапки с такими функциями, как:

нанизывать
свободный
индекс

Эти функции можно повторно использовать в разных проектах. Мы можем опубликовать их в NPM:

util-funcs/
 - src/
  - toString/
   - index.js
  - looseIdentical/
   - index.js
  - indexOf/
   - index.js
  - index.js
- .gitignore
- .npmignore
- package.json

Для установки так:

npm i util-funcs

Мы можем просто поделиться служебными функциями из проекта NPM utils-funcs, не создавая другой проект для модуля NPM.

Просто установите и инициализируйте рабочее пространство Bit в своей папке, а также отслеживайте и настраивайте функции утилиты.

npm i bit-bin -g
bit init
bit add src/**/

Затем экспортируйте подготовленные файлы в Bit.

bit export <BIT_ACCOUNT_NAME_HERE>.<COLLECTION_NAME_HERE>

Теперь мы можем импортировать их в наши проекты. Смотрите, мы также можем делиться функциями помимо компонентов. Посмотрите, насколько хорош и волшебен Бит !!! :)

Заключение

Мне нравится использовать NPM, поскольку он помогает нам создавать модульное программное обеспечение при повторном использовании пакетов. Lerna также хороша тем, что помогает нам публиковать множество модулей NPM из одного репо. Для более мелких компонентов Bit - ЗОЛОТОЙ .

Это превращает опыт разработчиков по многократному использованию кода в почти мгновенную легкую задачу, делая каждую функцию / модуль / компонент индивидуально повторно используемым. Это даже позволяет нам разрабатывать эти компоненты прямо из любого другого проекта! Он даже позволяет запускать модуль TS в другом проекте JS 😳 Это потрясающе.

Мы не можем отрицать тот факт, что Bit позволяет нам ускорить нашу разработку без полного игнорирования лучших практик разработки и оптимизации. Bit прост в использовании, прост в освоении (команды типа git) и, что наиболее важно, обеспечивает более быстрый цикл разработки.

Не стесняйтесь спрашивать, есть ли у вас какие-либо вопросы или комментарии, в разделе комментариев. Спасибо за чтение и не стесняйтесь попробовать!

Учить больше

5 практических способов обмена кодом: от NPM до Lerna и Bit
Как поделиться кодом между проектами: 5 полезных советов и инструментов от NPM до Lerna и Bit. 2018 год - хорошее время, чтобы остановиться… hackernoon.com

Как обмениваться компонентами React UI между проектами и приложениями
Простое руководство, которое поможет вам организовать, совместно использовать и синхронизировать компоненты React между приложениями вашей команды. blog.bitsrc .io

5 инструментов для ускорения разработки на React
5 инструментов для ускорения разработки вашего приложения React с упором на компоненты. blog.bitsrc.io