Создание монорепозитория Vue.js в 2023 году

Узнайте, как Bit может помочь вам преодолеть все проблемы с Monorepo для вашего нового проекта Vue.js!

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

Но монорепозитории могут прийти нам на помощь.

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

Плюсы и минусы монорепо

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

Это компромисс.

Давайте попробуем быстро понять хорошие и плохие стороны работы над проектом Vue с монорепозиторием:

👍 Плюсы:

• Полное развертывание проще, требуется меньше движущихся частей.
• Более простое управление зависимостями. Каждый компонент будет иметь одинаковые зависимости (те же версии).
• Всякий раз, когда обмен кодом имеет смысл, делать это намного проще.
• Стандартизация становится более плавной.

👎 Минусы:

• Публикация отдельного компонента или функции становится сложной задачей. Представьте, что в вашем проекте есть десятки компонентов, и вы внесли изменения только в один из них.
• Время сборки значительно увеличивается по той же причине.
• Монорепозиторий значительно упрощает разработчикам внедрение межкомпонентной связи.
• Работа с большой командой внутри одного монорепозитория может быть хаотичной. Особенно, если команда не использует правильные инструменты или не понимает их.
• Онбординг длится вечно. Присоединение к команде означает необходимость изучения и понимания всей кодовой базы, а не только кода отдельного компонента.
• Меньшая гибкость зависимостей, учитывая, что несколько версий одной и той же библиотеки не могут быть частью одной кодовой базы.

Имейте свой пирог и ешьте его: использование компонентно-ориентированной разработки в вашем монорепозитории

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

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

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

Я уверен, вы понимаете, что для проекта Vue это должно быть де-факто способом работы.

Но что делать, если у вас уже есть монорепозиторий и вы хотите начать делать CDD? Вот где в игру вступает Bit.

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

Другими словами, вы будете работать с CDD ВНУТРИ монорепозитория.

Сумасшедший? Возможно, но это работает!

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

Но подождите, разве это не похоже на работу с конфигурацией с несколькими репо?!

ТОЧНО!

С Bit вы будете ЧУВСТВОВАТЬ, что используете несколько отдельных репозиториев, В то время как на самом деле используете монорепозиторий. Это означает сохранение «плюсов», о которых мы говорили выше, и избавление от «минусов».

Не верите мне? Давайте по одному:

• Связь компонентов: в Bit при создании компонента он автоматически изолируется от всех остальных. Он также направляет локальные зависимости через папку node_modules, что еще больше усложняет связывание компонентов.
• Публикация одного компонента становится сложной задачей. У вас есть буквально одна команда для отправки и публикации новых версий компонентов с помощью Bit. Мало того, Bit также позволяет вам независимо управлять версиями каждого компонента, что еще больше упрощает другим приложениям выбор того, что именно использовать.
• Время сборки значительно увеличивается по той же причине. Это больше не так, теперь вы можете развертывать, устанавливать и обновлять компоненты по отдельности.
• Работа с большой командой внутри одного монорепозитория может быть хаотичной. Bit предоставляет готовые инструменты для совместной работы, что позволяет нескольким разработчикам очень легко работать над одним и тем же проектом (или компонентом), не наступая друг другу на пятки.
• Подключение занимает вечность. Это больше не так, поскольку разработчики (и команды) могут работать над отдельными компонентами, даже если все они работают над одним и тем же монорепозиторием.
• Меньшая гибкость зависимостей. Также больше не действует, Bit обрабатывает среды для каждого компонента на основе, что означает, что вы можете иметь разные версии одной и той же зависимости, работающие над одним и тем же проектом (т. е. иметь одни компоненты, использующие Vue 3, а другие — Vue 2).

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

Прежде чем продолжить, кратко ознакомьтесь с тем, чем может помочь Bit:

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

Демонстрационное время — создание блога

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

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

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

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

Итак, начнем!

Настройка монорепозитория Vue.js с Bit

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

Вот несколько ключевых соображений, о которых следует помнить:

1. Совместное использование кода. Определите необходимость совместного использования кода несколькими проектами или компонентами в монорепозитории. Определите, какие компоненты или библиотеки должны повторно использоваться и совместно использоваться различными приложениями Vue. В нашем случае это будут NavBar, Footer и значки мультимедиа.
2. Модульность. Оцените уровень модульности, необходимый для вашего проекта. Подумайте, нужно ли вам разрабатывать компоненты и версии независимо друг от друга, чтобы обеспечить гибкость и детализированные обновления. Альтернативой могут стать микросервисы (вот хорошая статья, описывающая, как создавать микросервисы, управляемые компонентами).
3. Совместная работа. Оцените требования к совместной работе внутри вашей команды. Определите, как разработчики будут работать вместе над общими компонентами, управляйте зависимостями и обеспечьте согласованные методы написания кода. Bit предоставит вам инструменты, вам просто нужно установить стандарты.

Создание монорепозитория Vue.js с Bit

Теперь давайте рассмотрим процесс создания монорепозитория Vue.js с использованием Bit. Следуй этим шагам:

1. Установить Bit: начните с глобальной установки Bit CLI на свой компьютер. Подробную инструкцию по установке вы можете найти в документации Bit: Установка Bit.
2. Инициализировать монорепозиторий. Создайте новый каталог для монорепозитория и перейдите к нему в терминале. Выполните следующую команду, чтобы инициализировать структуру монорепозитория:

bit new vue workspace --env teambit.vue/vue --default-scope [my-org].[my-scope]

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

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

2.1. Создание области. Области — это «группы» для ваших компонентов. В нашем случае мы перейдем в Bit Cloud, нажмите кнопку «Создать» в правом верхнем углу, а затем выберите параметр «Область».

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

Это приведет вас на страницу «новая область действия»:

Здесь я установил свою личную общедоступную область с именем «vue-blog». Вы можете выбрать все, что хотите. Наконец, нажмите «Создать».

Теперь вы готовы создать свое рабочее пространство с помощью приведенной выше команды 🥳 (правильно заменив свое имя пользователя и имя области).

3. Создание компонентов Vue. Начните создавать компоненты Vue в монорепозитории. Каждый компонент будет иметь свой собственный каталог и содержать свой код, стили и тесты. Не беспокойтесь, вам не придется следить за этим, Bit сделает это за вас. Вы просто используете следующую команду после входа в папку вашей рабочей области (помните, что это должно быть выполнено внутри рабочей области):

bit create vue components/nav-bar
bit create vue components/my-footer
bit create vue components/media-icons

После каждой из этих команд вы должны увидеть такой вывод:

Обратите внимание на тире («-») во всех их именах, это обязательно, потому что по умолчанию линтер попросит вас иметь имена, содержащие как минимум два слова, разделенные тире.

После того, как вы закончите со всеми тремя, ваша структура папок должна выглядеть так:

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

Мы можем построить каждый отдельно, и мы это сделаем.

Вот простой код для каждого компонента:

//navbar.vue
<template>
  <nav class="navbar">
    <ul class="nav-list">
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Services</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
</template>

<script>
export default {
  // Component logic here (if needed)
}
</script>

<style scoped>
.navbar {
  background-color: #333;
  color: #fff;
  padding: 10px;
}

.nav-list {
  list-style-type: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nav-list li {
  margin-right: 10px;
}

.nav-list li a {
  color: #fff;
  text-decoration: none;
}
</style>
//footer.vue
<template>
  <footer class="footer">
    <div class="footer-content">
      <p>&copy; 2023 My Website. All rights reserved.</p>
    </div>
  </footer>
</template>

<script>
export default {
  // Component logic here (if needed)
}
</script>

<style scoped>
.footer {
  background-color: #f0f0f0;
  padding: 20px;
  text-align: center;
}
</style>
//mediaicons.vue
<template>
  <div class="media-icons">
    <a href="#"><i class="fab fa-facebook-f"></i></a>
    <a href="#"><i class="fab fa-twitter"></i></a>
    <a href="#"><i class="fab fa-instagram"></i></a>
    <a href="#"><i class="fab fa-linkedin-in"></i></a>
  </div>
</template>

<script>
export default {
  // Component logic here (if needed)
}
</script>

<style scoped>
.media-icons {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
}

.media-icons a {
  color: #333;
  margin: 0 5px;
}

.media-icons a i {
  font-size: 20px;
}
</style>

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

Итак, продолжим.

Работаем над нашим новым монорепозиторием

На данный момент вы можете отправить свой код в один репозиторий, и у вас есть монорепозиторий с компонентами Vue. Но теперь мы можем увидеть некоторые из проблем, о которых мы уже упоминали:

• Как мы версионируем каждый компонент по отдельности?
• Как мы их распределяем?
• Как мы их используем?

Для этого мы должны продолжать двигаться вперед, к «тегированию».

Пометьте компоненты. После добавления компонентов пометьте их определенной версией. С этого начинается ваша способность отслеживать изменения и управлять версиями эффективно и, что наиболее важно, индивидуально. Используйте следующую команду:

bit install
bit tag

Первая команда проверит наличие всех необходимых зависимостей, добавленных предыдущими bit create командами.

Затем команда bit tag автоматически пометит все ваши компоненты. Всем им по умолчанию будет присвоен номер версии (0.0.1), и все они будут готовы к экспорту.

Вы должны увидеть что-то вроде этого, когда команда tag выполнена:

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

Вы также можете разместить свою удаленную область самостоятельно — узнайте больше здесь.

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

bit export

Эта команда эффективно экспортирует ВСЕ компоненты сразу, на самом деле вы можете увидеть здесь конечный результат:

Обратите внимание на значок «Vue» на всех моих трех компонентах и ​​на то, как два из них действительно показывают правильный предварительный просмотр. Компонент MediaIcons не показывает предварительный просмотр, потому что, если вы посмотрите на код, это просто код-заполнитель.

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

Однако давайте продолжим, потому что нам все еще не хватает решения наших проблем совместной работы.

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

• Установите его с помощью Bit или менеджера пакетов (pnpm, Yarn или npm), как и любую обычную зависимость. Это предназначено для использования, когда вы просто хотите «использовать» компонент как есть.
• Импортируйте его с помощью Bit. Обратите внимание, что я больше не говорю «установка». «Импортируя» компонент, вы будете загружать файлы в свою рабочую область, где вы сможете редактировать исходный код и делать его своим. Любые внесенные вами изменения могут быть отложены и опубликованы как новая версия. Это метод, который вы будете использовать, если хотите, чтобы ваши товарищи по команде сотрудничали с вами при разработке ваших компонентов.
• Разветвите его с помощью Bit. Вы также можете «разветвить» эти компоненты, что во многом похоже на «импорт», но история компонента не загружается. Фактически это означает, что вы будете создавать новый компонент, если будете вносить в него какие-либо изменения.

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

Вот новый код, который они придумали:

<template>
  <div class="media-icons">
    <a href="#">
     <svg xmlns="http://www.w3.org/2000/svg" data-name="Layer 1" viewBox="0 0 24 24" id="facebook"><path d="M20.9,2H3.1A1.1,1.1,0,0,0,2,3.1V20.9A1.1,1.1,0,0,0,3.1,22h9.58V14.25h-2.6v-3h2.6V9a3.64,3.64,0,0,1,3.88-4,20.26,20.26,0,0,1,2.33.12v2.7H17.3c-1.26,0-1.5.6-1.5,1.47v1.93h3l-.39,3H15.8V22h5.1A1.1,1.1,0,0,0,22,20.9V3.1A1.1,1.1,0,0,0,20.9,2Z"></path></svg> 
    </a>
    <a href="#">
      <svg xmlns="http://www.w3.org/2000/svg" data-name="Layer 1" viewBox="0 0 24 24" id="twitter"><path d="M22,5.8a8.49,8.49,0,0,1-2.36.64,4.13,4.13,0,0,0,1.81-2.27,8.21,8.21,0,0,1-2.61,1,4.1,4.1,0,0,0-7,3.74A11.64,11.64,0,0,1,3.39,4.62a4.16,4.16,0,0,0-.55,2.07A4.09,4.09,0,0,0,4.66,10.1,4.05,4.05,0,0,1,2.8,9.59v.05a4.1,4.1,0,0,0,3.3,4A3.93,3.93,0,0,1,5,13.81a4.9,4.9,0,0,1-.77-.07,4.11,4.11,0,0,0,3.83,2.84A8.22,8.22,0,0,1,3,18.34a7.93,7.93,0,0,1-1-.06,11.57,11.57,0,0,0,6.29,1.85A11.59,11.59,0,0,0,20,8.45c0-.17,0-.35,0-.53A8.43,8.43,0,0,0,22,5.8Z"></path></svg>
    </a>
    <a href="#">
      <svg xmlns="http://www.w3.org/2000/svg" data-name="Layer 1" viewBox="0 0 24 24" id="instagram"><path d="M12,9.52A2.48,2.48,0,1,0,14.48,12,2.48,2.48,0,0,0,12,9.52Zm9.93-2.45a6.53,6.53,0,0,0-.42-2.26,4,4,0,0,0-2.32-2.32,6.53,6.53,0,0,0-2.26-.42C15.64,2,15.26,2,12,2s-3.64,0-4.93.07a6.53,6.53,0,0,0-2.26.42A4,4,0,0,0,2.49,4.81a6.53,6.53,0,0,0-.42,2.26C2,8.36,2,8.74,2,12s0,3.64.07,4.93a6.86,6.86,0,0,0,.42,2.27,3.94,3.94,0,0,0,.91,1.4,3.89,3.89,0,0,0,1.41.91,6.53,6.53,0,0,0,2.26.42C8.36,22,8.74,22,12,22s3.64,0,4.93-.07a6.53,6.53,0,0,0,2.26-.42,3.89,3.89,0,0,0,1.41-.91,3.94,3.94,0,0,0,.91-1.4,6.6,6.6,0,0,0,.42-2.27C22,15.64,22,15.26,22,12S22,8.36,21.93,7.07Zm-2.54,8A5.73,5.73,0,0,1,19,16.87,3.86,3.86,0,0,1,16.87,19a5.73,5.73,0,0,1-1.81.35c-.79,0-1,0-3.06,0s-2.27,0-3.06,0A5.73,5.73,0,0,1,7.13,19a3.51,3.51,0,0,1-1.31-.86A3.51,3.51,0,0,1,5,16.87a5.49,5.49,0,0,1-.34-1.81c0-.79,0-1,0-3.06s0-2.27,0-3.06A5.49,5.49,0,0,1,5,7.13a3.51,3.51,0,0,1,.86-1.31A3.59,3.59,0,0,1,7.13,5a5.73,5.73,0,0,1,1.81-.35h0c.79,0,1,0,3.06,0s2.27,0,3.06,0A5.73,5.73,0,0,1,16.87,5a3.51,3.51,0,0,1,1.31.86A3.51,3.51,0,0,1,19,7.13a5.73,5.73,0,0,1,.35,1.81c0,.79,0,1,0,3.06S19.42,14.27,19.39,15.06Zm-1.6-7.44a2.38,2.38,0,0,0-1.41-1.41A4,4,0,0,0,15,6c-.78,0-1,0-3,0s-2.22,0-3,0a4,4,0,0,0-1.38.26A2.38,2.38,0,0,0,6.21,7.62,4.27,4.27,0,0,0,6,9c0,.78,0,1,0,3s0,2.22,0,3a4.27,4.27,0,0,0,.26,1.38,2.38,2.38,0,0,0,1.41,1.41A4.27,4.27,0,0,0,9,18.05H9c.78,0,1,0,3,0s2.22,0,3,0a4,4,0,0,0,1.38-.26,2.38,2.38,0,0,0,1.41-1.41A4,4,0,0,0,18.05,15c0-.78,0-1,0-3s0-2.22,0-3A3.78,3.78,0,0,0,17.79,7.62ZM12,15.82A3.81,3.81,0,0,1,8.19,12h0A3.82,3.82,0,1,1,12,15.82Zm4-6.89a.9.9,0,0,1,0-1.79h0a.9.9,0,0,1,0,1.79Z"></path></svg>
    </a>
    <a href="#">
      <svg xmlns="http://www.w3.org/2000/svg" data-name="Layer 1" viewBox="0 0 24 24" id="linkedin"><path d="M20.47,2H3.53A1.45,1.45,0,0,0,2.06,3.43V20.57A1.45,1.45,0,0,0,3.53,22H20.47a1.45,1.45,0,0,0,1.47-1.43V3.43A1.45,1.45,0,0,0,20.47,2ZM8.09,18.74h-3v-9h3ZM6.59,8.48h0a1.56,1.56,0,1,1,0-3.12,1.57,1.57,0,1,1,0,3.12ZM18.91,18.74h-3V13.91c0-1.21-.43-2-1.52-2A1.65,1.65,0,0,0,12.85,13a2,2,0,0,0-.1.73v5h-3s0-8.18,0-9h3V11A3,3,0,0,1,15.46,9.5c2,0,3.45,1.29,3.45,4.06Z"></path></svg>
    </a>
  </div>
</template>

<script>
export default {
  // Component logic here (if needed)
}
</script>

<style scoped>
.media-icons {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
}

.media-icons a {
  color: #333;
  margin: 0 5px;
}

.media-icons a svg {
  width: 24px;
}
</style>

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

bit tag deleteman.vue-blog/components/media-icons

Обратите внимание, как я сослался на компонент, указав его идентификатор, используя следующий URI: [username].[scope]/folder/component-name

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

bit export deleteman.vue-blog/components/media-icons

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

Давайте теперь рассмотрим следующий шаг: масштабирование и использование наших компонентов в другом месте.

Понравилось ли вам то, что вы прочитали? Подпишитесь на мой БЕСПЛАТНЫЙ информационный бюллетень, где я делюсь со всеми своим 20-летним опытом работы в ИТ-индустрии. Присоединяйтесь к Бродяге старого разработчика!

Масштабирование нашего Vue Monorepo

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

Но как только проекты начинают расти, мы должны помнить о некоторых аспектах:

• Как другие команды могут сотрудничать с вами над вашими компонентами?
• Как другие могут повторно использовать ваши компоненты?
• Как насчет документации? Есть ли решение для этого?

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

Что касается их повторного использования, как я уже упоминал, это просто вопрос их установки. Если планируется повторное использование и улучшение, лучший вариант — «импортировать» их.

Например, если вы заинтересованы в использовании моего компонента NavBar и его расширении, вы должны использовать следующую строку из своего собственного рабочего пространства (да, вам нужно настроить рабочее пространство):

bit import deleteman.vue-blog/components/nav-bar

Когда вы это сделаете, произойдут следующие вещи:

• В вашей рабочей области будет создана папка, куда будет скопирован код моего компонента.
• Внутри папки node_modules будет создана символическая ссылка, указывающая на код компонента. Почему? Потому что таким образом вы можете установить компонент как обычный и при этом иметь возможность вносить изменения в код.

И изнутри вашего кода вы должны импортировать NavBar следующим образом:

import {NavBar} from '@deleteman/vue-blog.components.nav-bar'

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

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

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

Как насчет документации монорепозитория?

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

Bit решает эту проблему, предоставляя готовую поддержку файлов документации MarkDown. Если вы не можете найти их в папке вашего компонента, просто создайте папку, оканчивающуюся на .docs.md, и напишите туда документацию.

У вас также есть так называемые «композиции», которые представляют собой файлы, позволяющие настраивать и использовать ваш компонент по-разному. Затем эти композиции по умолчанию вставляются в раздел документации.

Вы можете просмотреть, как документация будет выглядеть перед экспортом вашего компонента, используя следующую строку:

bit start

Эта простая команда запустит сервер разработки и отобразит такой веб-сайт:

Обратите внимание, что когда я нажимаю на ссылку «медиа-значки», я вижу основной документ (название «Медиа-иконки» и строка под ним). Этот текст является частью моего файла media-icons.docs.md.

А композиция — это просто нормально отрендеренный компонент. Поскольку это простой компонент, с одной композицией у нас есть все, что нам нужно, но вы можете экспортировать несколько композиций из одного файла. Мой файл композиции выглядит так:

import BasicMediaIcons from "./media-icons-basic.fixture.vue";

export { BasicMediaIcons };

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

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

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

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

Что вы думаете о подходе CDD? Нашли ли вы какой-либо другой инструмент, который решает все проблемы, как это делает Bit? Или вам нужно использовать несколько для работы?

Рекомендуемые статьи: