Вы когда-нибудь сталкивались с трудностями, заставляя проект Angular хорошо работать в монорепозитории Lerna, одновременно используя при этом рабочие области Yarn? Это краткое руководство проведет вас через шаги, необходимые, чтобы связать эти три вещи и получить максимальную отдачу от вашего монорепо. Но сначала давайте предоставим некоторую предысторию.
Моно-репо
Монорепозиторий - это стратегия контроля версий, которая управляет несколькими проектами программного обеспечения с помощью единой истории контроля версий.
Преимущества
- Моно-репо чрезвычайно полезно в качестве одного из источников истины - это способ наладить сотрудничество за счет увеличения вклада и устранения банальных разрозненностей.
- Структура упрощает организацию - проекты становятся проще в навигации и объединяются в единую сборку.
- Их легко проверить внутриорганизационные зависимости
- Моно-репо приводят к расширенной непрерывной интеграции, в чем Лерна играет значительную роль.
«Разделение больших баз кода на отдельные пакеты с независимыми версиями чрезвычайно полезно для совместного использования кода. Однако внесение изменений во многие репозитории беспорядочно и трудно отслеживаемое, а тестирование в репозиториях очень быстро усложняется », - Лерна
Лерна
Lerna - это инструмент, используемый для управления монорепозиториями, содержащими несколько проектов javascript. Ваше монорепо может содержать код на любом языке, но lerna полезна только для управления проектами javascript в монорепозитории.
Преимущества
- Сохраняет историю git из внешних проектов при их импорте в монорепо
- Запустить сценарий в каждом проекте с помощью одной команды
- Публикует несколько пакетов с помощью одной команды
- Символьные перекрестные зависимости между пакетами вместо того, чтобы полагаться на потенциально устаревшие артефакты сборки
Пряжа Рабочие места
Yarn - это инструмент, похожий на NPM, который поставляется с дополнительными функциями, включая подъем зависимостей. Если вы управляете несколькими проектами javascript внутри единой структуры каталогов, yarn может «поднять» идентичные зависимости из отдельных проектов в общие модули node_modules в корне проекта.
Преимущества
- Более быстрая установка (отлично подходит для улучшения CI)
- Меньше места на диске
- Обновите один раз, обновите везде
- Один файл блокировки
- пряжа ссылка
Угловой
Величие Angular не нуждается в представлении. Здесь можно использовать любой фреймворк или библиотеку, потому что монорепозиторий Lerna не зависит от фреймворка.
Con
Если есть один инструмент, который делает все это, непременно следует использовать его, поскольку чрезмерное использование инструментов определенно не идеально. Nx Workspaces может выполнять все три задачи. Однако структура имеет угловатый оттенок и может не совсем соответствовать желаемому.
Руководство по установке и настройке
Это руководство будет отражать демонстрационный код, найденный здесь, на github.
Установка и настройка Lerna
Первый шаг - создать новый каталог. Мы можем назвать это гармонией. После изменения каталога в этот вы захотите запустить yarn init. Это создаст package.json внутри вашего каталога и станет отправной точкой для вашего монорепозитория.
mkdir harmony && cd harmony && yarn init
Следующее - добавить инструмент управления Lerna. После запуска Lerna будет добавлен в devDependencies в package.json и будет существовать в node_modules (-D добавляет его в devDependencies вместо зависимостей).
yarn add lerna -D
Ниже мы инициализируем монорепо Lerna. Главный вывод из этого - файл lerna.json создается вместе с каталогом пакетов. При настройке Yarn Workspaces мы рассмотрим конфигурацию файла lerna.json.
./node_modules/.bin/lerna init
Настройка рабочих пространств пряжи
Мы захотим добавить приведенный ниже фрагмент в lerna.json. Здесь для npmClient установлено значение yarn, а для useWorkspaces установлено значение true.
Мы собираемся внести два дополнительных изменения в lerna.json и одно дополнительное изменение в package.json.
Установите «» version »:« independent »` в lerna.json. Это запрещает всем версиям пакета переходить к одной и той же версии при запуске публикации Lerna в корне монорепозитория.
Установите «» stream: «true» «в lerna.json. При этом отображается любое ведение журнала консоли из команд уровня пакета, которые обычно скрыты на корневом уровне. Хорошим примером является запуск модульных тестов из всех пакетов в корне монорепозитория.
Установите `private: true` в корневом пакете package.json ниже, так как рабочие области могут быть включены только в частных проектах. Корневая рабочая область должна быть частной, потому что корневая рабочая область никогда не будет опубликована, вместо этого отдельные пакеты в вашей рабочей области будут публиковаться независимо (даже если вы используете lerna для публикации их всех сразу).
Добавление в проект Angular
На корневом уровне монорепо установите Angular Cli
yarn add @angular/cli
При этом теперь мы можем добавить проект Angular в монорепозиторий, выполнив следующую команду и изменив каталог на папку пакетов. Обратите внимание, что каталог «packages» можно переименовать во что угодно, просто не забудьте обновить имя в файлах lerna.json и package.json.
cd packages && ../node_modules/.bin/ng new angular-app
Добавление дополнительных пакетов
Не стесняйтесь добавлять еще несколько пакетов в монорепо. В демонстрационный код добавлены пакеты core-styles и tslintrules. Ниже приведены соответствующие package.json для каждого. Это раздел, в котором вы можете проявить творческий подход. Возможно, вы хотите добавить реактивное приложение или инициализировать экспресс-пакет в другом. Дело в том, что вы можете управлять несколькими проектами, которые не обязательно являются угловыми или даже интерфейсными.
Затем мы можем продемонстрировать, что Yarn Workspaces поднимает все общие зависимости на корневой уровень монорепо. Мы можем создать перекрестные зависимости между пакетами, добавив эти два имени пакета к зависимостям в angular-app. В package.json приложения angular добавьте следующее (многоточия добавляются, чтобы свернуть другие части).
Увидеть это в действии
Символьные ссылки
В корне монорепозитория Lerna запуск yarn install установит все зависимости. Если все пойдет по плану, все общие зависимости будут перенесены в корневую папку node_modules.
Там мы должны увидеть @angular из проекта Angular, stylelint из пакета core-styles, tslint из пакета tslintrules и многие другие.
Мы также можем видеть, как Yarn правильно обрабатывает символические ссылки. Поскольку пакет @ harmony / angular зависит от пакетов core-styles и tslintrule, мы ожидаем, что они также находятся в корневом node_modules. Это можно увидеть на изображении вместе с правильной символической ссылкой; он обозначен стрелками справа.
Если приложение angular должно было вызывать другую версию основных стилей, отличную от той, которая существует в монорепозитории, тогда Yarn Workspaces достаточно сложна, чтобы добавить артефакт основных стилей в node_modules на уровне потомка angular-app. В свою очередь, это не будет символически связано с исходным местоположением в каталоге пакетов. Вместо этого он будет существовать как установленная упакованная версия.
Живая перезагрузка между пакетами
Если у нас есть приложение Angular, обслуживаемое локально, и мы вносим изменения в основные стили, монорепозиторий через символическую ссылку видит изменения и автоматически бесплатно перекомпилирует приложение для нас! Это, пожалуй, самый выгодный аспект монорепо.
Чтобы увидеть это в действии, запустите yarn start в пакете angular-app. Перейдите к localhost: 4200 в браузере. Затем в пакете core-styles раскомментируйте строку 2 файла `core.scss`, показывая новый цвет стиля. Посмотрите, как приложение перекомпилируется, а его заголовок меняет цвет. Ниже показано желаемое поведение в действии.
Запуск команды Lerna
Тестирование общих команд Lerna также гарантирует, что мы используем простоту запуска одной команды в нескольких пакетах, что идеально подходит для CI. Запуск команды yarn build вызывает сценарий lerna run build из корневого package.json. Это запустит сценарий сборки в каждом пакете. Если в пакете нет сценария сборки, этот пакет будет проигнорирован. Ниже вставлен результат сборки. Мы видим, что он запускал скрипт сборки только для пакетов angular-app и core-styles; пропуская сборку в пакете tslintrules.
Пробуди величие внутри
Однажды наставник произнес эти тонкие, но открывающие глаза слова: «Код - это просто, люди - тяжелые». Когда эти три вещи: рабочие области Angular, Lerna и Yarn работают в гармонии, проект улучшается, и люди, стоящие за проектом, могут работать более эффективно и продуктивно вместе. Это достигается путем объединения общего оптимизированного рабочего пространства с одной из лучших платформ и инструментов в сообществе. Мы надеемся, что это облегчит понимание того, что «людям тяжело».
