Привет, кодеры!

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

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

Так как же решить эту проблему? Monorepo спешит на помощь!

monorepo - это репозиторий, содержащий более одного логического проекта. Эти проекты могут быть несвязанными, слабо связанными или связанными с помощью инструментов управления зависимостями. Таким образом, все наши приложения React размещены вместе в одной папке вместе с общими зависимостями. Каждое приложение-реакция структурировано так же, как и обычное приложение-реакция, и имеет свой собственный набор зависимостей. Каждое приложение может получить доступ к общему модулю, как если бы это был пакет npm. Если нам нужно обновить общий компонент, мы можем это сделать, собрать пакет, и все готово. Изменения в нашем компоненте немедленно отразятся там, где он используется.

Давайте посмотрим, как это реализовать:

1. Настройка Lerna и Yarn

Вы должны убедиться, что используете Yarn в качестве диспетчера зависимостей, а не npm. Yarn имеет функцию под названием Рабочие области, которая является неотъемлемой частью создания монорепозитория. При использовании Yarn с включенными рабочими пространствами он установит зависимости из нескольких файлов package.json во вложенных папках в одной корневой папке без дублирования.

Еще один инструмент в нашем арсенале монорепозитория - Lerna. Lerna - это инструмент для управления проектами Javascript с несколькими пакетами. Он оптимизирует рабочий процесс управления и публикации репозиториев с несколькими пакетами с помощью Git и npm. При использовании с Yarn он облегчает запуск npm или произвольных скриптов в пакетах, таких как test или build, а также процесс публикации нескольких взаимозависимых пакетов. Это позволяет вам делиться пакетами, которые живут внутри вашего монорепозитория, с другими проектами как пакеты npm.

Lerna должна быть установлена ​​как зависимость разработчика на корневом уровне. Затем запускаем npx lerna init. Это создаст lerna.json файл конфигурации, а также папку packages на корневом уровне.

Рабочие области Yarn и lerna создают символическую ссылку в node_modules вашего приложения, чтобы оно могло получить доступ к общим ресурсам так же, как и к любому модулю npm. В этом блоге подробно рассказывается о том, что происходит под капотом.

2. Настройка структуры проекта.

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

Каждое дочернее приложение создается с помощью create-react-app.

Shared содержит все компоненты в src. Когда мы создаем общий модуль, он компилируется и сохраняется в dist. Наши клиентские приложения импортируют необходимые компоненты из dist и используют их. Shared также может содержать общие утилиты и конфигурации для использования в приложениях.

3. Настройка глобального package.json

Ключевое слово workspaces определяет папку, в которой хранятся наши пакеты, и что все в этих папках будет пакетом с собственным package.json файлом. scripts используется для определения задач, которые мы хотим запускать на корневом уровне. Сюда входят задачи сборки, линтинг и выполнение тестов. Для каждого приложения определяется отдельный сценарий запуска, поэтому мы можем запускать каждое приложение отдельно. Мы также определили сценарий для переноса общего пакета с помощью babel.

4. Настройка lerna.json

  • version: текущая версия репозитория.
  • packages: Массив глобусов для использования в качестве расположения пакетов. Определенные глобусы относятся к каталогу, в котором находится lerna.json, который обычно является корнем репозитория.

Конфигурация пакетов в lerna.json - это список глобусов, которые соответствуют каталогам, содержащим package.json, именно так lerna распознает "листовые" пакеты (в отличие от "корневого" package.json, который предназначен для управления зависимостями разработчика и скриптами для всего репо).

4. Настройка package.json для конкретного приложения.

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

5. Настройка общей папки компонентов

Это package.json внутри общего пакета. Конфигурации для тестовой среды Jest были определены здесь, чтобы облегчить выполнение модульных тестов для общих служебных функций. Здесь также определяются конфигурации и пресеты для Babel. Здесь поддерживаются все зависимости, необходимые для общих компонентов.

Папка src на этом уровне содержит все наши общие компоненты React.

6. Настройка Storybook для быстрой разработки компонентов.

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

Storybook устанавливается как зависимость разработчика в общем доступе. Мы определяем сценарий для запуска сборника рассказов в shared / package.json. Создав компоненты, вы можете писать «рассказы», ​​чтобы включить их в свой сборник рассказов. История используется для рендеринга вашего компонента с разными реквизитами, чтобы вы могли видеть все различные формы, которые он может принимать. Все истории компонентов хранятся в общих / историях. При запуске сборника рассказов все истории загружаются из этой папки.

Типичная история могла бы выглядеть так:

7. Использование общего компонента в приложении.

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

Компонент Button, например, можно импортировать как:

import Button from 'shared/dist/components/Button/Button'

Вот и все. Теперь у вас есть полностью работающий мульти-CRA. Спасибо за прочтение!