Публикация пакетов npm на GitHub

Иногда в проектах сайтов и бэкендов встречаются общие компоненты (React, utils, validations, etc), и, если следовать концепции DRY, мы должны найти способ создать отдельный пакет и установить его в каждом проекте, который в нем нуждается.

Мы рассмотрим, как создавать и публиковать пакеты JavaScript с помощью GitHub и npm.

Решение GitHub

GitHub предоставляет GitHub Package Registry для публикации частных пакетов npm. Мы также можем использовать его для образов Docker и библиотек для других языков, например Ruby, но мы сосредоточимся на решении npm.

Конфигурация публикации

Для публикации в реестр GitHub необходимо добавить секцию publishConfig в файл package.json.

"publishConfig": {
  "registry": "https://npm.pkg.github.com"
}
Вход в полноэкранный режим Выход из полноэкранного режима

Рабочий процесс

Этот рабочий процесс будет публиковать пакет в реестре GitHub каждый раз, когда мы создаем релиз в репозитории GitHub:

name: Publish
on:
  release:
    types: [created]
jobs:
  publish:
    runs-on: ubuntu-latest
    permissions:
      contents: read
      packages: write
    steps:
      - uses: actions/checkout@v2
      - uses: actions/setup-node@v2
        with:
          node-version: 16
      - run: npm install
      - run: npm run build
      - run: |
          echo @lexacode:https://npm.pkg.github.com/ > build/.npmrc
          echo '//npm.pkg.github.com/:_authToken=${NPM_TOKEN}' >> build/.npmrc
      - run: npm publish
        working-directory: ./build
        env:
          NPM_TOKEN: ${{ secrets.GITHUB_TOKEN }}
Войти в полноэкранный режим Выйти из полноэкранного режима

permissions изменяет разрешения по умолчанию, предоставленные GITHUB_TOKEN.

Этот рабочий процесс создает файл .npmrc внутри каталога build/ перед публикацией пакета в реестр.

echo @lexacode:registry=https://npm.pkg.github.com/ > build/.npmrc
echo '//npm.pkg.github.com/:_authToken=${NPM_TOKEN}' >> build/.npmrc
Вход в полноэкранный режим Выход из полноэкранного режима

? Помните, что название вашей организации, например, lexacode, должно быть в kebab-case, верхний регистр не допускается.

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

- run: npm publish
  working-directory: ./build
  env:
    NPM_TOKEN: ${{ secrets.GITHUB_TOKEN }}
Вход в полноэкранный режим Выход из полноэкранного режима

Установка пакета GitHub

Чтобы установить пакет GitHub локально, необходимо создать PAT (Personal Access Token) в GitHub web. Убедитесь, что вы выбрали разрешение read:packages. Затем добавьте токен в свое окружение:

export NPM_TOKEN=<YOUR_GITHUB_TOKEN>
Войти в полноэкранный режим Выйти из полноэкранного режима

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

@lexacode:registry=https://npm.pkg.github.com/
//npm.pkg.github.com/:_authToken=${NPM_TOKEN}
Войти в полноэкранный режим Выйти из полноэкранного режима

Теперь вы можете запустить npm install:

npm install @lexacode/package-example
Войти в полноэкранный режим Выйти из полноэкранного режима

В действиях GitHub

Чтобы использовать ваш пакет в действиях GitHub, вы должны использовать код, подобный следующему:

build:
  permissions:
      contents: read
      packages: read
  steps:
    - uses: actions/checkout@v2
    - uses: actions/setup-node@v2
      with:
        node-version: 16
    - run: npm ci
      env:
        NPM_TOKEN: ${{ secrets.GITHUB_TOKEN }}
Войти в полноэкранный режим Выйти из полноэкранного режима

? Вам необходимо явное разрешение packages: read.

Пересечение пакетов между организациями

Если вы хотите использовать пакет из другой организации с помощью реестра пакетов GitHub, вы должны установить свой PAT как секретный в репозитории. Вместо этого отредактируйте файл YAML, используя новый секрет:

- run: npm ci
  env:
    NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
Вход в полноэкранный режим Выход из полноэкранного режима

? Пользовательский раздел permissions не требуется для этого сценария.

Заключение

Вы можете публиковать приватные пакеты и использовать их везде, где захотите, с помощью реестра пакетов GitHub.

Я оставил вам полный репозиторий с пакетом TypeScript, уже опубликованный с помощью действия CI. ?

lexacode / package-example

Пример пакета npm

Этот репозиторий является шаблоном для создания пакетов TypeScript, совместимых с модулями ES и CommonJS.

Посмотреть на GitHub

Оставьте комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *