Java, UX, HTML, CSS, WEB-design

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

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

Название: Yarn Workspaces: организуйте кодовую базу вашего проекта как профессионал . Краткое описание: [ad_1] ⭐ Хорхе Ф . Дата публикации: 23.01.2022 . Автор: Алишер Валеев .

Для чего создан сайт Novosti-Nedeli.ru

Данный сайт посвящен новостям мира и мира технологий . Также тут вы найдете руководства по различным девайсам.

Сколько лет сайту?

Возраст составляет 3 года

[ad_1]

  • Хорхе Феррейро

  • 0 Комментарии

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

  • 8 минут чтения

  • Реакция, Кодирование, Техники

Краткое резюме ↬

Рабочие пространства Yarn позволяют организовать кодовую базу проекта с помощью монолитного репозитория (monorepo). В этой статье Хорхе объясняет, почему они являются отличным инструментом и как создать свой первый монорепозиторий с помощью Yarn с базовыми сценариями npm и добавить необходимые зависимости для каждого приложения.

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

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

  • Нет независимых развертываний.

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

  • Нечеткие границы.

    Поскольку я полагаюсь на глобальную пакет.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

: Внутри папки создайте новый пакет.json

$ cd example-monorepo
$ touch package.json

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

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

файл, чтобы сделать пакет приватным:

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

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

$ mkdir packages

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

$ yarn create react-app packages/client

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

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

команда.

3. Создайте экспресс-проект и добавьте его в рабочую область express-generator Теперь пришло время добавить серверное приложение! Мы используем

для создания скелета Express со всей необходимой конфигурацией и скриптами. express-generator Убедитесь, что у вас есть

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

установлен на вашем компьютере. Вы можете установить его с помощью Yarn с помощью следующей команды: express-generatorС использованием , мы создаем новое приложение Express с именем «сервер» внутри пакеты

$ express --view=pug packages/server

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

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

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

на моем сайте.

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

— и Yarn творит чудеса, устанавливая все зависимости для каждого пакета, оптимизируя и кэшируя их.

$ yarn install

Выполните следующую команду: Эта команда генерирует пряжа.замок

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

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

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

который говорит Yarn включить все пакеты внутри пакетыпапка. "workspaces": ["packages/*"]

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

Внутри корня

пакет.json concurrently, обновите содержимое файла следующей строкой:

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

$ yarn add -W concurrently

в корень пакет.json: 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"
   }
}

пакет.json. Два сценария инициализируют клиентов React и Express независимо друг от друга; другой использует для параллельного запуска обоих скриптов. См. этот код для справки. start Примечаниеcreate-react-app : express-generatorНам не нужно будет писать наш

скрипты в пакеты «сервер» и «клиент», потому что инструменты, которые мы использовали для создания этих пакетов (

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

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

Перейти к

$ yarn start

пакеты/сервер/bin/www

и измените порт по умолчанию в строке 15.

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

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

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

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

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

Кайл Ветч

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

Для любых комментариев или вопросов, не стесняйтесь обращаться ко мне на
Твиттер

Реагировать

Кодирование

Техники

[ad_2]
Source: https://smashingmagazine.com

Заключение

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

Пожалуйста оцените статью, и напишите комментарий.

Похожие статьи

Добавить комментарий

Ваш адрес email не будет опубликован.

Кнопка «Наверх»