Как легко поделиться кодом JavaScript: познакомьтесь с «управляемым копированием и вставкой» Bit ✨

Что, если бы вы могли «копировать-вставить» код в несколько проектов и легко синхронизировать изменения исходного кода и зависимостей?

Мы все копируем и вставляем код. Мы знаем, что не должны, но знаем.

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

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

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

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

Итак, как это работает?

Вот основная концепция, которая делает все это возможным:

Git управляет изменениями исходного кода в одном репозитории, но не отношениями между кодом в разных репозиториях. Менеджеры пакетов обрабатывают зависимости для опубликованных модулей, но не исходный код.

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

Экспорт кода для совместного использования

Допустим, у меня есть репозиторий с простой многоразовой функцией hello-world:

.
├── package.json
└── src
    ├── hello-world.js
    └── index.js

Используя Bit, мы можем отслеживать этот компонент в репо с помощью одной команды:

$ bit add src/hello-world.js src/index.js --id hello/world
tracking component hello/world:
    added src/hello-world.js
    added src/index.js

После отслеживания Bit запускает код и разрешает весь график зависимостей функции. Затем он записывает компонент как единое целое и отслеживает его.

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

Затем мы можем версировать компонент и экспортировать его в bit.dev (Bit’s hub):

$ bit tag hello/world
1 components tagged | 1 added, 0 changed, 0 auto-tagged
added components:  hello/[email protected]

А также

$ bit export user-name.my-collection-name
1 component was exported to Collection user-name.my-collection-name

Вот и все! Теперь к компоненту предоставлен доступ и он готов к использованию в другом проекте. Никакого рефакторинга, никакой сложной настройки. Это быстрее, чем копирование.

Вот реальный пример результата того же рабочего процесса с Ramda utlis:

Импорт общего кода из другого проекта

Итак, теперь у нас есть эта функция как повторно используемый компонент в bit.dev, и мы хотим использовать ее в другом проекте.

Давайте перейдем к другому проекту и используем Bit для импорта компонента:

$ bit import user-name.collection-name/name-space/hello-world

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

Но что произойдет, если мы внесем небольшое изменение в компоненты одного из проектов? Давайте посмотрим.

Синхронизация изменений общего кода между проектами

Итак, теперь у нас есть одна и та же функция hello-world, реализованная в обоих проектах.

Давайте внесем небольшие изменения в функцию из второго проекта. Исходный код файла hello-world.js выглядит так:

export default function hello(world) {
    return `hello ${world}`;
}

Давайте изменим его так, чтобы он возвращал hi world, но оставим имя функции:

export default function hello(world) {
    return `hi ${world}`;
}

Затем давайте быстро bit status посмотрим, что изменилось:

$ bit status
modified components
  > name-space/hello-world... ok

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

$ bit tag name-space/hello-world
$ bit export user-name.collection-name

Версия будет изменена, а коллекция будет дополнена измененным компонентом!

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

Выполните быстрый bit import, чтобы загрузить новую версию, созданную из другого проекта:

$ bit import user-name.collection-name/name-space/hello-world

А затем используйте checkout, чтобы объединить изменения!

$ bit checkout 1.0.1 string/contains
successfully switched hello-world to version 1.0.1

Bit использует git merge для автоматического объединения обеих версий:

$ bit status
modified components
(use "bit tag --all [version]" to lock a version with all your changes)
    > name-space/hello-world ... ok

Вот и все!

Что сейчас произошло?

Итак, мы создали управляемое копирование и вставку для общего кода между двумя проектами JavaScript!

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

Результат? больше совместного использования кода, меньше кода, более быстрая разработка. Не стесняйтесь нырнуть и попробовать :)