Yarn Workspaces: организуйте кодовую базу вашего проекта как профессионал

Каждый раз, когда я начинаю работать над новым проектом, я спрашиваю себя: «Должен ли я использовать отдельные репозитории git для моего внутреннего сервера и моего внешнего клиента (клиентов)? Как лучше организовать кодовую базу?»

У меня возник тот же вопрос после нескольких месяцев работы над моим личным сайтом. Изначально у меня был весь код в одном репозитории: серверная часть использовала Node.js, а внешняя часть использовала ES6 с Pug. Я принял эту организацию для удобства, поскольку наличие обоих проектов в одном репозитории упростило поиск функций и классов и облегчило рефакторинг. Тем не менее, я нашел некоторые недостатки:

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

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

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

Что такое рабочие области пряжи?

Yarn — это менеджер пакетов, созданный людьми из Facebook, и у него есть замечательная функция, называемая рабочими пространствами Yarn. Рабочие пространства Yarn позволяют организовать кодовую базу проекта с помощью монолитного репозитория (monorepo). Идея состоит в том, что один репозиторий будет содержать несколько пакетов. Пакеты изолированы и могут жить независимо от более крупного проекта.

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

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

“

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

Создание проекта Monorepo с помощью React и Express с использованием рабочих пространств Yarn за шесть шагов

Итак, мы узнали, что такое Yarn, что такое монорепозиторий и почему Yarn — отличный инструмент для создания монорепозитория. Теперь давайте с нуля научимся создавать новый проект с использованием рабочих пространств Yarn. Чтобы продолжить, вам понадобится рабочая среда с актуальной установкой npm. Загрузите исходный код.

Предпосылки

Чтобы полностью пройти этот урок, на вашем компьютере должна быть установлена ​​Yarn. Если вы еще не устанавливали Yarn, следуйте этим инструкциям.

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

1. Создайте свой проект и корневую рабочую область
2. Создайте проект React и добавьте его в список рабочей области
3. Создайте экспресс-проект и добавьте его в рабочую область
4. Установите все зависимости и поздоровайтесь с yarn.lock
5. Использование подстановочного знака (*) для импорта всех ваших пакетов
6. Добавьте скрипт для запуска обоих пакетов

1. Создайте свой проект и корневую рабочую область

В локальном терминале создайте новую папку с именем example-monorepo :

 $ mkdir example-monorepo

Внутри папки создайте новый package.json с нашей корневой рабочей областью.

 $ cd example-monorepo $ touch package.json

Этот пакет должен быть закрытым, чтобы предотвратить случайную публикацию корневой рабочей области. Добавьте следующий код в новый файл package.json , чтобы сделать пакет приватным:

 { "private": true, "name": "example-monorepo", "workspaces": [], "scripts": {} }

2. Создайте проект React и добавьте его в список рабочей области

На этом этапе мы создадим новый проект React и добавим его в список пакетов внутри корневой рабочей области.

Во-первых, давайте создадим папку с именем packages , куда мы добавим различные проекты, которые мы создадим в учебнике:

 $ mkdir packages

В Facebook есть команда для создания новых проектов React: create-react-app . Мы будем использовать его для создания нового приложения React со всей необходимой конфигурацией и скриптами. Мы создаем этот новый проект с именем «клиент» внутри папки пакетов , которую мы создали на шаге 1.

 $ yarn create react-app packages/client

После того, как мы создали наш новый проект React, нам нужно сообщить Yarn, чтобы он рассматривал этот проект как рабочую область. Для этого нам просто нужно добавить «client» (имя, которое мы использовали ранее) в список «workspaces» в корневом package.json . Обязательно используйте то же имя, которое вы использовали при запуске команды create-react-app .

 { "private": true, "name": "example-monorepo", "workspaces": ["client"], "scripts": {} }

3. Создайте экспресс-проект и добавьте его в рабочую область

Теперь пришло время добавить серверное приложение! Мы используем express-generator для создания скелета Express со всей необходимой конфигурацией и скриптами.

Убедитесь, что на вашем компьютере установлен express-generator . Вы можете установить его с помощью Yarn с помощью следующей команды:

 $ yarn global add express-generator --prefix /usr/local

Используя express-generator , мы создаем новое приложение Express с именем «сервер» внутри папки пакетов .

 $ express --view=pug packages/server

Наконец, добавьте новый пакет server в список рабочих пространств внутри корневого package.json .

 { "private": true, "name": "example-monorepo", "workspaces": ["client", "server"], "scripts": {} }

Примечание . Это руководство упрощено только двумя пакетами (сервер и клиент). В проекте у вас обычно может быть столько пакетов, сколько вам нужно, и по соглашению сообщество разработчиков открытого исходного кода использует этот шаблон именования: @your-project-name/package-name . Например: я использую @ferreiro/server на своем веб-сайте.

4. Установите все зависимости и поздоровайтесь с yarn.lock

После того, как мы добавили наше приложение React, а также наш сервер Express, нам нужно установить все зависимости. Рабочие области Yarn упрощают этот процесс, и нам больше не нужно обращаться к каждому отдельному приложению и устанавливать их зависимости вручную. Вместо этого мы выполняем одну команду — yarn install — и Yarn творит чудеса, устанавливая все зависимости для каждого пакета, оптимизируя и кэшируя их.

Выполните следующую команду:

 $ yarn install

Эта команда создает файл yarn.lock (аналогичный этому примеру). Он содержит все зависимости для вашего проекта, а также номера версий для каждой зависимости. Yarn генерирует этот файл автоматически, и вам не нужно его изменять.

5. Использование подстановочного знака (*) для импорта всех ваших пакетов

До сих пор для каждого нового пакета, который мы добавляли, нам приходилось также обновлять корневой package.json , чтобы включить новый пакет в список workspaces:[] .

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

Внутри корневого package.json обновите содержимое файла следующей строкой: "workspaces": ["packages/*"]

 { "private": true, "name": "example-monorepo", "workspaces": ["packages/*"], "scripts": {} }

6. Добавьте скрипт для запуска обоих пакетов

Последний шаг! Нам нужен способ запускать оба пакета — клиент React и клиент Express — одновременно. В этом примере мы будем использовать concurrently . Этот пакет позволяет нам запускать несколько команд параллельно.

Добавьте concurrently в корневой package.json :

 $ yarn add -W concurrently

Добавьте три новых скрипта в корневую рабочую область package.json . Два сценария инициализируют клиентов React и Express независимо друг от друга; другой использует concurrently для параллельного запуска обоих сценариев. См. этот код для справки.

 { "private": true, "name": "example-monorepo", "workspaces": ["packages/*"], "scripts": { "client": "yarn workspace client start", "server": "yarn workspace server start", "start": "concurrently --kill-others-on-fail \"yarn server\" \"yarn client\" } }

Примечание . Нам не нужно будет писать наши сценарии start в пакеты «сервер» и «клиент», потому что инструменты, которые мы использовали для создания этих пакетов ( create-react-app и express-generator ), уже добавляют эти сценарии для нас. Итак, мы готовы идти!

Наконец, убедитесь, что вы обновили сценарий загрузки Express для запуска сервера Express на порту 4000. В противном случае клиент и сервер попытаются использовать один и тот же порт (3000).

Перейдите в packages/server/bin/www и измените порт по умолчанию в строке 15.

 var port = normalizePort(process.env.PORT || '4000');

Теперь мы готовы запустить наши пакеты!

 $ yarn start

Куда пойти отсюда

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

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

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

Кроме того, я настроил инфраструктуру для проекта хакатона, в котором используются рабочие пространства React, webpack, Node.js и Yarn, и вы можете проверить исходный код здесь.

Наконец, вам было бы очень интересно узнать, как публиковать свои независимые пакеты, чтобы ознакомиться с жизненным циклом разработки. Есть пара туториалов, которые интересно проверить: публикацию пряжи или публикацию npm.

Если у вас есть комментарии или вопросы, не стесняйтесь обращаться ко мне в Твиттере. Кроме того, в ближайшие месяцы я опубликую больше материалов на эту тему в своем блоге, так что вы тоже можете подписаться там. Удачного кодирования!