Введение

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

Отказ от ответственности: это руководство предполагает некоторые базовые знания React!

Что такое пакет?

Пакет – это файл или каталог кода, который был доступен в частном или общедоступном режиме. Обычно эти файлы добавляют функциональности вашему приложению.

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

Эти пакеты обычно находятся в папке с именем node_modules при локальной установке. Да, эта папка весит тонну и никогда не должна быть зафиксирована в репозитории Github.

Хорошо, тогда что такое GitHub Packages?

Пакеты GitHub позволяют нам напрямую размещать созданный нами пакет. Это включает в себя целый ряд функций, поскольку он привязан к экосистеме GitHub, например, интеграции с API-интерфейсами GitHub, действиями GitHub и веб-перехватчиками.

Мы создадим нашу библиотеку компонентов React в виде пакета для размещения в Github Packages.

Настройка пакетов GitHub

Во-первых, давайте продолжим и создадим новый репозиторий. GitHub уже содержит подробное руководство по этому поводу. Ссылка здесь. Для контекста это также является официальным руководством GitHub по настройке репозитория пакетов.

После этого давайте откроем Visual Studio Code или выбранную вами IDE и клонируем ее локально. В репо нажмите на код и возьмите ссылку клона.

И клонируем его на нашу локальную машину.

Сладкий! Теперь мы можем инициализировать npm для создания нашего package.json.

Вам будет задано несколько вопросов о новом пакете. Не забудьте оставить имя как:

@YOUR-USERNAME/YOUR-REPOSITORY 
... 
test command: exit 0 
...

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

npm install 
git add . 
git commit -m "initialize npm package" 
git push

Создание хука React

Мы создадим простой пакет React. Как вы могли заметить, я назвал свой пакет useless-hooks. Поэтому я добавлю общий бесполезный хук. В этом случае используйте KonamiCode, который только что добавил прослушиватель событий для пользовательского ввода. Если пользователь вводит определенную комбинацию клавиш подряд, это вызовет обратный вызов.

Главный вывод здесь — просто создать свой хук и поместить его в папку src:

Публикация в пакетах Github

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

Важно знать, что GitHub проверяет, есть ли в вашем репозитории папка .github в корне вашего каталога и подпапка workflows.

Что такое ЯМЛ?

Вот определение прямо с их сайта:

YAML — удобный язык сериализации данных для всех языков программирования

https://yaml.org/

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

Создайте следующие папки и файлы в корне каталога:

И в файл добавить следующие строки:

Подключение к npm

Теперь мы можем подключить его к NPM, создав файл .npmrc в корневом каталоге и добавив следующую строку (и заменив YOUR-USERNAME своим именем пользователя GitHub:

@YOUR-USERNAME:registry=https://npm.pkg.github.com

или создав следующую запись в package.json

"publishConfig": { 
    "registry": "https://npm.pkg.github.com" 
},

И последнее, но не менее важное: мы отправим все наши изменения в репозиторий:

git add . 
git commit -m "workflow to publish package" 
git push

Создание релиза

Чтобы создать релиз, перейдите в свой репозиторий на GitHub и справа вы увидите раздел Релизы. Идите вперед и создайте новый релиз.

После этого на новом экране вы можете создать релиз, добавив тег, заголовок и описание, а затем нажав Опубликовать релиз.

Теперь на вкладке GitHub Actions мы увидим, как работает наш рабочий процесс! (Возможно, вы видите версию 1.0.1, я забыл загрузить файл YAML с любым содержимым…. 😅)

Успех!

Установка библиотеки пакетов GitHub

Я просто запущу приложение для примера со следующими командами:

npx create-react-app my-app 
cd my-app

Обычно я мог бы использовать npm install useless-hooks напрямую, но сначала мы должны указать нашему приложению пакеты GitHub.

Во-первых, мы должны пройти аутентификацию в пакетах GitHub. Я оставлю это руководство здесь самим GitHub: Ссылка

Создайте файл .npmrc в корне нашего проекта.

Замените @diballesteros своим именем пользователя GitHub или тем, которое вы использовали для создания пакета.

И в наш package.json мы включим новую зависимость:

"dependencies": { 
    ...other dependencies, 
    "@diballesteros/useless-hooks": "^1.0.1" 
}

И запустите:

npm install

Использование библиотеки пакетов GitHub

Наконец-то мы можем использовать наш пакет!

В нашем App.js мы можем импортировать его, как и любую другую библиотеку:

Заключение

Найти репозиторий можно здесь. Публикаций больше, чем в этой статье, потому что я столкнулся с несколькими проблемами при аутентификации.

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

Больше контента на Relatable Code

Если вам это понравилось, не стесняйтесь связаться со мной в LinkedIn или Twitter.

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

Первоначально опубликовано на https://relatablecode.com 4 апреля 2022 г.