Для публикации приватного 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 на хостинге. Если у вас возникнут проблемы в процессе, не стесняйтесь задавать дополнительные вопросы!