На моем YouTube вышло новое видео! 🔥 Посмотреть его можно здесь.

Создаем NPM библиотеку UI компонентов. React, Typescript, Storybook. Публикуем на GitHub Packages

————————————

Вот полезные материалы и упоминания из ролика:

1. В видео в dependencies мы установили только react и данная библиотека не попадает в итоговый билд (в папку dist), благодаря параметру external.
Скорее всего, у вас в библиотеке будут использоваться и другие npm-модули (например, lodash). И чтобы эти модули попадали в билд, вам необходимо установить пакет @rollup/plugin-node-resolve. Также в нем можно указать либо исключить конкретные модули для папки dist при помощи параметра resolveOnly.
2. Начальный код. Склониуйте его себе, если будете разрабатывать библиотеку вместе со мной по видео. tsconfig, eslintrc и другие конфиги также смотрите по этой ссылке);
3. Настройка webpack для storybook;
4. Команда для установки wepback5 модулей:

npm install @storybook/builder-webpack5 @storybook/manager-webpack5 -D

5. Шаблон для файла .npmrc:

registry=https://registry.npmjs.org/
@YOUR_GITHUB_USERNAME:registry=https://npm.pkg.github.com/
//npm.pkg.github.com/:_authToken=YOUR_AUTH_TOKEN

6. Шаблон названия библиотеки для файла package.json:

"name": "@YOUR_GITHUB_USERNAME/YOUR_REPOSITORY_NAME",
"publishConfig": {
"registry": "https://npm.pkg.github.com/YOUR_GITHUB_USERNAME"
},

7. Необходимые зависимости storybook для работы контролов:

"@storybook/addon-essentials": "^6.5.13",
"@storybook/addon-interactions": "^6.5.13",
"@storybook/addon-links": "^6.5.13",

8. Начальные зависимости в package.json.
9. Репозиторий с итоговым кодом.