Тёмный

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

Maxim Filanovich
Подписаться 1,5 тыс.
Просмотров 5 тыс.
50% 1

Опубликовано:

 

29 сен 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 28   
@ЛёшаГарус
@ЛёшаГарус Год назад
спасибо за видео!!! жду следующих
@Ramosok
@Ramosok 7 месяцев назад
Круто!!!
@v.demchenko
@v.demchenko 2 месяца назад
React version should be above 18. Storybook have trouble with older versions.
@homo-ergaster
@homo-ergaster Месяц назад
Хороший видос. Долго искал подходящий по этой теме, этот прямо все понятно объяснил и не устарел еще
@MaximFilanovich
@MaximFilanovich Месяц назад
Я когда создавал приватный npm пакет на коммерческом проекте, то тоже сильно удивлялся, когда не находил нужной информации по этой теме в интернете. Пришлось знатно попотеть, чтобы разобраться. В итоге решил сделать видео, чтобы и я не забыл, как делать npm пакет, и чтобы другие смогли без проблем найти и изучить информацию. Я очень рад, что тебе помогли мои труды! :)
@homo-ergaster
@homo-ergaster Месяц назад
@@MaximFilanovich Спасибо за спасибо )
@its_daim
@its_daim 7 месяцев назад
Привет, спасибо, крутой видос. Вопрос возник, вот мы используем токен для чтения что бы использовать нашу библиотеку, а как тогда мы устанавливаем допустим material ui без этого токена? Можешь пояснить пожалуйста в чем разница?)
@MaximFilanovich
@MaximFilanovich 7 месяцев назад
Привет! В видео мы разрабатываем приватную библиотеку, к которой есть доступ только у конкретной команды разработчиков. Material UI - это публичная библиотека, ее может установиться каждый. На коммерческих проектах чаще всего нужна именно приватная библиотека UI компонент. А для приватности необходим токен
@vadim_romanov
@vadim_romanov 4 месяца назад
крутой урок, спасибо подскажите, Максим, а в github packages чтобы установить библиотеку кому-либоу всегда нужен токен на чтение? или можно сделать библиотеку доступную для скачивания всем без токена просто через npm?
@MaximFilanovich
@MaximFilanovich 4 месяца назад
Мы в видео создаем именно приватную библиотеку и для ее доступа необходим токен. Если делать публичную библиотеку, которая доступна для скачивания всем, то токен конечно же не нужен
@vadim_romanov
@vadim_romanov 4 месяца назад
@@MaximFilanovich просто пытаюсь сделать публичную библиотеку, публикую её, она приватная, меняю видимость на публичную, пробую установить через npm и все равно требует токен(
@MaximFilanovich
@MaximFilanovich 4 месяца назад
@@vadim_romanovчестно, не рассматривал как делать публичную библиотеку. В продуктовой разработке часто нужна именно приватная. Наверняка через GitHub Packages это можно сделать. Поищи в инете, какие там параметры нужно изменить для публичной
@hellogoodbye2806
@hellogoodbye2806 6 месяцев назад
не понятно как разрабатывать сами компоненты библиотеки без дев режима с хот релоадом
@MaximFilanovich
@MaximFilanovich 6 месяцев назад
Я так понимаю, вы хотите сделать изменения в проекте библиотеки и моментально увидеть эти же правки в проекте, в который подключена библиотека. Я правильно понял?
@life_amasing_life
@life_amasing_life Год назад
запиши курс по джаваскрпt пожалуйста!
@Danny-uc6kx
@Danny-uc6kx Год назад
видос крутой, длинный но все понятно рассказано
@moy_gospadin_ABOBA
@moy_gospadin_ABOBA Год назад
Огромное спасибо!
@stasend
@stasend Год назад
Максим, спасибо за ролик! Подскажи, разве правильно, чтобы стили всей библиотеки приходили одним файлом? Возможно ли разбить итоговый результат таким образом, чтобы при импорте компонента, вместе с ним импортировались только стили этого компонента?
@MaximFilanovich
@MaximFilanovich Год назад
Не вижу никакой проблемы в одном файле index.scss для всей библиотеки. Не думаю, что при любом другом способе у тебя стили будут грузится намного быстрее. Для твоего кейса скорее всего можно использовать extract: false в плагине postcss. Благодаря этому параметру файл со стилями создаваться не будет, все стили будут прописаны внутри dist/index.js (скорее всего они будут прописаны через атрибут style, но это не точно)
@stasend
@stasend Год назад
@@MaximFilanovich например такой вариант: я использую библиотеку в проекте, где не все компоненты задействованы, зачем мне все стили?
@MaximFilanovich
@MaximFilanovich Год назад
@@stasend ну да, в данном случае действительно незачем. Но если твои компоненты не совсем большие по размеру и количество неиспользованных компонент мало, то, как по мне, не стоит запариваться по поводу оптимизации загрузки стилей для этих компонент. В любом случае, если тебе так сильно это нужно, то можешь попробовать параметр extract в postcss, думаю, должно помочь. А вообще можно попробовать твои компоненты выпилить через rollup. Я думаю у бандлеров (rollup, webpack) есть возможность исключить из билда некоторые компоненты. Только на вопрос как это сделать, я навряд ли отвечу. Нужно идти в Гугл :)
@awicone
@awicone 8 месяцев назад
ну и с типами такая же история, разбрались как селать билд с модульными типами, а не общими? Чтобы они хранились в папке с компонентом
@andteslenko
@andteslenko Год назад
Лайк && подписка
@MaximFilanovich
@MaximFilanovich Год назад
Круто)
@Danny-uc6kx
@Danny-uc6kx Год назад
единственный вопрос который остался, можно ли както избавиться импорта файла стилей каждый раз при использовании библиотеки, не очень удобно както
@MaximFilanovich
@MaximFilanovich Год назад
Импортировать файл стилей необходимо только один раз в проект (это частая практика для ui kit библиотек). В React приложении ты можешь просто сделать один импорт в index.js либо App.js. Но можно обойтись и без файла стилей, просто указав нужные настройки в плагине postcss. Там вроде как за это отвечает extract. Можешь поставить extract: false и файл со стилями создаваться не будет (но стили при этом должны примениться). Возможно, я в чем-то ошибаюсь, лучше перепроверь документацию плагина postcss: github.com/egoist/rollup-plugin-postcss#extract-css
@Danny-uc6kx
@Danny-uc6kx Год назад
@@MaximFilanovich да все верно, этот вопрос успел изучить) я правильно понимаю что такое решение с импортом картинок было использовано потому что rollup не умеет умеет работать с импортамт картинок в файлах стилей(background: url()), или это мне не удалось найти решение этой проблемы
@MaximFilanovich
@MaximFilanovich Год назад
​@@Danny-uc6kxЧестно не знаю, умеет или нет. Но в любом случае, на практике лучше использовать тег img, а не background: url(). Могут быть исключительные кейсы, но они редкие. Если тебе так нужен background-image, то я думаю у rollup есть решение на этот счет. И скорее всего оно будет через postcss.
Далее
We finally APPROVED @ZachChoi
00:31
Просмотров 9 млн
Se las dejo ahí.
00:10
Просмотров 2,2 млн
Build And Publish A React Component Library
24:02
Просмотров 103 тыс.
How to make your own NPM package (Step-by-Step) 📦
16:46
Storybook 7 Crash Course - React Typescript
28:23
Просмотров 45 тыс.
We finally APPROVED @ZachChoi
00:31
Просмотров 9 млн