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

Такие решения приведут к очевидным проблемам с копированием/вставкой вашего package.json из одного проекта в другой.

Это решение пригодится, когда вы работаете с монорепозиториями или git-модулем.

И мы знаем, что потом будет — бессонные ночи исправления кучи разных проблем на разных проектах, с другой версией, ох, черт с ним.

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

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

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

Имейте в виду, что существует Yarn версии 1.x, которая считается классической Yarn и Yarn версии 2. Икс. У них есть только небольшие отличия, связанные с разделами скриптов в вашем package.json и все.

Конфигурация

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

Допустим, мы хотим создать следующую структуру проекта:

  • project-a — наши первые проекты React
  • project-b — наш второй проект React
  • linter-ws — наши зависимости ESlint
  • react-ws — наши зависимости React

Примечание. В качестве примера я использовал React, но не обязательно иметь одинаковые фреймворки, например, наш linter-ws можно использовать в качестве рабочей области для Node, Vue, ReactNative и любого другого фреймворка.

В итоге наша структура корневых папок выглядит так:

/
  /project-a
    /package.json
  /project-b
    /package.json
  /linter-ws
    /package.json
  /react-ws
    /package.json

Конфигурация: linter-ws

Мы создадим простой linter-ws/package.json для наших зависимостей линтера, например:

Готово? Хорошо.

Это будет наша первая рабочая область. В этом package.json нет ничего особенного, за исключением того, что будьте внимательны при создании name, так как он будет нашим идентификатором для нашей рабочей области.

Конфигурация: реакция-ws

Это рабочее пространство мы собираемся использовать в качестве зависимостей React. Я выбрал package.json, который по умолчанию генерируется CRA, но у вас все равно не должно возникнуть никаких сложностей, когда ваш проект станет больше. Создайте react-ws/package.json и заполните его следующим образом:

Это будет наше второе рабочее пространство.

Поскольку это сделано, давайте двигаться дальше.

Конфигурация: проект-а и проект-б

Мы сохраним конфигурацию одинаковой для обоих проектов для простоты.

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

Теперь мы можем запустить команду yarn install, чтобы установить все зависимости от наших project-a и project-b, и все будет работать просто отлично.

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

Мы добавили строку ”workspaces”: [“../linter-ws”, “../react-ws”] в наш проект. Имейте в виду, что нам нужно указать путь к нашей рабочей области, каталогу, который содержит package.json.

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

Те папки рабочей области, которые вы видите в project-a/node_modules, являются символическими ссылками на наши react-ws/node_modules и linter-ws/node_modules. Но обратите внимание на имя символической ссылки linter-ws в project-a/node_modules, это имя linter. Это произошло потому, что наш ключ имени linter-ws/package.json равен linter.

Полученные результаты

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

Чтобы убедиться, что все правильно, начиная с project-a или project-b, выполните:

yarn start

or

yarn lint:check

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

Плюсы

  • СУХИЕ зависимости
  • Не нужно изобретать велосипед, все проверено и готово к работе
  • Вы можете использовать * в ключе workspace, если хотите, чтобы все папки стали вашими рабочими пространствами, например workspaces: ["packages/*"]
  • Это НЕ экспериментальное решение, его можно использовать в реальных производственных проектах.
  • Вы можете запускать сценарии рабочих областей с помощью yarn workspace <%workspace-name%> <%script-name%>, но имейте в виду, что считается, что вы вызвали сценарий так же, как он был вызван из каталога рабочей области, если у вас есть ссылки на пути, будьте осторожны. Так, например, если мы будем звонить из папки project-a yarn workspace linter lint:fix, будут выделены проблемы с кодом в папке linter-ws.

Минусы

  • Первый раз самый болезненный, вам нужно потратить некоторое время на самообразование, особенно если вы добавляете эту функцию в существующий проект с большим количеством зависимостей.
  • Вы не можете использовать вложенную рабочую область
  • Вы не можете СУШИТЬ скрипты
  • Вам необходимо строго следовать иерархии node_module зависимостей пакетов. Так, например, вы не можете использовать eslint-react в linter-ws, если eslint указано в project-a.

Ресурсы:

  1. Ссылка на пример приложения.

Как всегда, с любовью, ваш дружелюбный застройщик.

Повышение уровня кодирования

Спасибо, что являетесь частью нашего сообщества! Перед тем, как ты уйдешь:

  • 👏 Хлопайте за историю и подписывайтесь на автора 👉
  • 📰 Смотрите больше контента в публикации Level Up Coding
  • 🔔 Подписывайтесь на нас: Twitter | ЛинкедИн | "Новостная рассылка"

🚀👉 Присоединяйтесь к коллективу талантов Level Up и найдите прекрасную работу