Как можно опубликовать приватный npm пакет, который был создан с использованием storybook-vite-react?

У меня возникла следующая ситуация. Я хочу создать приватную библиотеку для npm. Я создал пустой проект, используя storybook, vite и react, и добавил в него два простых компонента: кнопку и инпут. В связи с этим у меня есть вопрос: как правильно опубликовать этот пакет? Я попробовал один из вариантов, но он не сработал. Кроме того, мне бы хотелось узнать, как можно разместить сам storybook на хостинге.
  • 10 февраля 2025 г. 16:54
Ответы на вопрос 1
Для публикации приватного npm пакета, созданного с использованием Storybook, Vite и React, следуйте следующим шагам:

### Шаг 1: Подготовка пакета

1. Убедитесь, что ваш `package.json` файл настроен правильно. Не забудьте указать следующие ключевые поля:
   - `name`: имя вашего пакета (должно быть уникальным).
   - `version`: версия вашего пакета.
   - `private`: установите значение `true`, если вы не хотите публиковать пакет в открытом доступе (необязательно для приватных репозиториев).
   - `publishConfig`: добавьте `access: restricted`, чтобы указать, что пакет является приватным.

   Пример `package.json`:
   ```json
   {
     "name": "your-private-package",
     "version": "1.0.0",
     "private": false,
     "publishConfig": {
       "access": "restricted"
     },
     "main": "dist/index.js", // Убедитесь, что путь соответствует вашей сборке
     "scripts": {
       "build": "vite build",
       "storybook": "storybook dev -p 6006"
     },
     "dependencies": {
       "react": "^17.0.0",
       "react-dom": "^17.0.0"
     }
   }
   ```

2. Создайте сборку вашего пакета с помощью Vite. Включите в свой пакет не только компоненты, но и другие ресурсы, такие как стили. Введите команду в консоли:
   ```bash
   npm run build
   ```

3. Убедитесь, что все необходимые файлы для вашего пакета находятся в директории, на которую ссылается `main` в `package.json`.

### Шаг 2: Аутентификация и публикация

1. Убедитесь, что вы вошли в свой аккаунт на npm:
   ```bash
   npm login
   ```

2. Публикуйте ваш пакет:
   ```bash
   npm publish
   ```

### Шаг 3: Использование пакета

После публикации вы можете добавить ваш приватный пакет в другие проекты с помощью команды:
```bash
npm install your-private-package --registry=https://registry.npmjs.org/
```

### Размещение Storybook на хостинге

Чтобы разместить Storybook, выполните следующие шаги:

1. Соберите ваш Storybook:
   ```bash
   npm run build-storybook
   ```

   Эта команда создаст статические файлы в директории `storybook-static` (по умолчанию).

2. Разместите содержимое директории `storybook-static` на вашем хостинге. Вам могут подойти следующие варианты:
   - **GitHub Pages**: вы можете использовать GitHub Pages для хостинга статических сайтов. Просто загружайте свою папку `storybook-static` в ветку `gh-pages` вашего репозитория.
   - **Netlify**: создайте проект на Netlify, и укажите директорию `storybook-static` для развертывания.
   - **Vercel**: аналогично Netlify, Vercel позволяет развертывать статические сайты.

3. После размещения на хостинге вы получите URL-адрес, по которому можно будет получить доступ к вашему Storybook.

### Заключение

Следуя этим шагам, вы сможете успешно опубликовать свой приватный пакет на npm и разместить Storybook на хостинге. Если у вас возникнут проблемы в процессе, не стесняйтесь задавать дополнительные вопросы!
Похожие вопросы