Библиотека компонентов React для чайников

Ищете идеальный шаблон для создания потрясающей библиотеки компонентов реакции? Угадай, что? нет ни одного.

Я усвоил это на собственном горьком опыте, отбросив все шаблоны библиотеки, существующие в дебрях JavaScript. Настройка библиотеки с нуля может показаться сложной задачей, но преимущества понимания процесса легко перевешивают прилагаемые усилия. Кроме того, вы, вероятно, не захотите оправдывать свои решения перед начальником, говоря: «Я просто следил за статьей и шаблоном какого-то случайного парня».

Однако, если ваша библиотека представляет собой разовое приключение, ничего не масштабируемое, и вы можете спокойно спать, не зная основных моментов, вы можете перейти к концу статьи, чтобы найти ссылки на некоторые хорошие стартовые библиотеки. И да, они не идеальны!

Если вы найдете такие термины, как ES5, ES6, ES2015, Compilers, Bundlers, взятые из чужого языка? Глоссарий React должен заставить вас чувствовать себя как дома.

Хватит болтать, давайте начнем с реального!

Самая важная часть правильного определения неизвестного - это составить список вопросов, которые нужно задать. Если у вас есть правильный набор вопросов, найти ответы будет легко, и г-н Google вас не разочарует.

«Один, чтобы править всеми»?

Расшифрованная версия, будет ли эта библиотека содержать много чего и даже может иметь много зависимостей? Если это так, вам может потребоваться преобразовать библиотеку в несколько пакетов меньшего размера, как и в современных библиотеках. Вы часто будете видеть этот образец в действии, @scope/my-package}. Такой подход предоставляет вашим пользователям свободу установки и использования только необходимых пакетов. Вам не нужно покупать весь магазин, когда все, что вам нужно, - это какой-то один товар.

Считаете пакеты и думаете о боли, связанной с управлением инфраструктурой? Не волнуйтесь, Monorepo позаботится о вас. Если вам это кажется чуждым, Monorepos означает единый монолитный репозиторий, содержащий все связанные проекты или, в нашем случае, несколько пакетов. Монорепозитории популярны в наши дни и уже используются такими техническими гигантами, как Facebook и Google. Прошли те времена, когда при слове «Monorepos» приходилось качать головой. Причина этого может заключаться в сложных инструментах управления или в том, что мы всегда можем обвинить тенденции.
Нужна дополнительная информация? См. Ссылки внизу.

Как вы обслуживаете?

Есть несколько способов сделать это, но однозначного ответа нет. Правильный ответ полностью зависит от ваших пользователей и от того, как они собираются использовать вашу библиотеку.

Что еще более важно, кому вы служите?

Пользователь имеет современную настройку сборки приложения с интегрированными инструментами компиляции и пакетирования, такими как babel и webpack, для создания своих приложений. Такие настройки, как приложение create response, являются ярким примером этого.
У пользователя нет никаких настроек сборки, и он, скорее всего, будет использовать вашу библиотеку как один файл сценария. Напоминает старые добрые времена Bootstrap и JQuery.
Пользователи, создающие приложения для IE. Держитесь подальше от таких людей, они смертельны, они бьют незаметно, и вы никогда не знаете, что вас поразило.

Большинство пользователей вашей библиотеки принадлежат к первой категории, если вы читаете это в 2019 году (я вижу вас путешественниками во времени).
Что вы обслуживаете?

Подавайте его настолько сырым, насколько он есть - обслуживание вашего кода в том виде, в каком он есть, может показаться интересным и простым, но будьте осторожны, эти трюки выполняются профессионалами, которые тренируются годами, поэтому не пробуйте это дома.
Готовьте по рецепту - скомпилируйте свой вариант JavaScript в соответствии со стандартом ES5 и предоставьте код. И да, нет связывания, потому что ваш пользователь в любом случае будет использовать бандлер в своем приложении. Более того, ваша библиотека может иметь несколько модулей в качестве точек входа, поэтому пользователи могут выборочно включать модули, которые им нужны, что приводит к лучшей оптимизации.
Например, import Button from ‘@material-ui/core/Button’; гарантирует, что вы импортируете автономный компонент Button вместо всего монолитного пакета.
Это рекомендуемый способ обслуживания и использования библиотек.
Ах, да! он самоуверен, но сохраняет простоту и не требует, чтобы люди начинали копаться в сложных темах, таких как «Встряхивание дерева» и все такое.
Завершите это, чтобы не было видно. Давайте возьмем скомпилированный вывод из вышеуказанного шага и объединим его в один файл. Этот подход обслуживает все типы пользователей, о которых мы говорили ранее. Требуется немного больше работы для настройки, и он приносит в игру непреодолимые схватки Rollup vs Webpack vs «x». Точка существа? Подумайте еще раз, действительно ли вам нужны такие противоречия в жизни!

Определение невидимого!

Как удовлетворить пользователей, у которых нет никаких настроек сборки, и которые будут включать библиотеку непосредственно в html-файл в качестве сценария?
Вам необходимо объединить вашу библиотеку в один файл из-за удобства использования и простоты распространения. Предостережение, связанное с этим подходом, простое: размер приложения вашего пользователя может существенно увеличиться, потому что он будет загружать весь пакет, когда все необходимое было одной единственной «функцией».

В довершение всего, если ваш пользователь также работает с устаревшими браузерами, такими как Internet Explorer или более ранними версиями Chrome, мне просто не в голову, если кто-то действительно работает, вам нужно будет изменить систему целевых модулей с `ES` на одну из устаревшая модульная система.

Все модульные системы, модные словечки, если вы не знакомы, такие как CommonJS, AMD, UMD, - это просто шаблоны, разработанные для решения проблемы отсутствия собственных модулей. Теперь, когда у нас есть собственные модули ES, могут ли они дать однозначный ответ?

В большинстве случаев да! Они поддерживаются всеми современными браузерами, во-вторых, у наших пользователей будет правильная настройка сборки, чтобы они могли легко использовать наш код и компилировать в любой форме, которая им нужна, в зависимости от демографии конечных пользователей.

См. Ссылки внизу для получения дополнительной информации о модульных системах.

Как насчет оружия, сержант?

Angular или React? Это тоже действует как снотворное!
Какая разновидность JS? Ваниль, кофе, машинописный текст, clojurescript, причина, по которой все в конечном итоге компилируется в JS, и другого пути нет, по крайней мере, в обозримом будущем. Выбирайте с умом, это сильно повлияет на продуктивность вашей команды. Что касается рекомендаций, вы не ошибетесь с Typescript, и есть причина, по которой Typescript популярен в сцене библиотеки.
Какой вариант CSS? Мы выбрали JSS и довольны им. Пожалуйста, ознакомьтесь с его функциональной страницей, но вы не ошибетесь и с другими вариантами, такими как sass или меньше.
Как вы разрабатываете и демонстрируете свой компонент? Демонстрационное приложение прекрасно подойдет, но вам следует использовать Storybooks, особенно если библиотека требует масштабирования, они имеют большое значение для продуктивной разработки. Интерактивная витрина с развернутыми где-то интерактивными компонентами - удовольствие для ваших пользователей. Это просто потрясающе.
Как вы тестируете свои компоненты? Если вы только начинаете и имеете ограниченную информацию по теме, я бы порекомендовал вам проверить Jest, поскольку он также разработан Facebook, и его опыт действительно «восхитителен» как они выразились.
Собираетесь использовать Monorepo, а? Вам следует интегрировать Lerna для управления своим Monorepo. Поверьте, это сделает вашу жизнь намного проще.
Забыть о документах? Вы можете использовать для этого сборники рассказов, однако, если вы хотите задокументировать огромный API и у вас много работы, независимый сайт документации - лучший вариант.
Мы использовали Ocular от Uber для создания статического сайта из файлов уценки, плюс его довольно легко настроить и начать работу. Это действительно волшебство от Uber.

Ваша библиотека общедоступна?

Да? Ваш путь прост. Все, что вам нужно сделать, это опубликовать его на npm, это не ракетостроение. Быстрый поиск в Google или поиск в документации npm должны помочь.

Нет? Есть несколько способов справиться с этим:

Купите частные учетные записи npm для своей организации, ваши пользователи также должны иметь частные учетные записи
Создайте / разместите свой собственный частный реестр, для этого доступно довольно много опций, таких как cnpm, verdaccio
Используйте сторонние сервисы, такие как gemfire или myget, эти сервисы позволяют размещать ваши пакеты конфиденциально в облаке.

Покажи мне код!

Практическое руководство находится в разработке, следите за обновлениями.

Полезные ссылки и справочные материалы

Рекомендуемая стартовая библиотека JS: nwb
Дополнительный вариант для JS или если вы хотите использовать Typescript: Create React Library
CSS в JS: особенности страницы
Управляющий Monorepo: lerna
Среда разработки и витрина компонентов: сборники рассказов
Дополнительная информация о Monorepo: см. Эту статью
Генератор сайта документации: Ocular
Подробнее о сборке библиотек и выборе модульных систем: отличная статья Камлеша
Заинтригованы модульными системами? Не ищите ничего, кроме этой крутизны Адди Османи.
Webpack vs Rollup: то же самое, но другое

Технический обозреватель: Умар Ашфак
Дизайн обложки: Айза Чаудри