Я создаю разделяемую библиотеку компонентов React.
Библиотека содержит много компонентов, но конечному пользователю может понадобиться использовать только некоторые из них.
Когда вы связываете код с помощью Webpack (или Parcel или Rollup), он создает один файл со всем кодом .
Из соображений производительности я не хочу, чтобы весь этот код загружался браузером, если он фактически не используется. Правильно ли я считаю, что не следует связывать компоненты? Должна ли комплектация быть оставлена потребителю компонентов? Оставляю ли я что-нибудь еще потребителю компонентов? Должен ли я просто перенести JSX и все?
Если в одном репозитории много разных компонентов, что должно быть в main.js?
imported
в коде, таким образом уменьшая размер пакета.Ответы:
Это очень длинный ответ, потому что этот вопрос заслуживает очень длинного и подробного ответа, поскольку способ «наилучшей практики» является более сложным, чем ответ в несколько строк.
Iv'e поддерживал наши собственные библиотеки в течение 3,5 с лишним лет, и тогда я остановился на двух способах, которые, по моему мнению, должны быть связаны между собой библиотеками. Компромиссы зависят от того, насколько велика ваша библиотека, и лично мы компилируем оба способа, чтобы удовлетворить оба подмножества потребители.
Способ 1. Создайте файл index.ts со всем, что вы хотите, чтобы он был экспортирован, и целевым накоплением для этого файла в качестве входных данных. Объедините всю свою библиотеку в один файл index.js и файл index.css; С внешней зависимостью, унаследованной от потребительского проекта, чтобы избежать дублирования библиотечного кода. (Гист включен в нижней части примера конфигурации)
import { Foo, Bar } from "library"
Метод 2: Это для опытных пользователей: создайте новый файл для каждого экспорта и используйте rollup-plugin-multi-input с опцией «preserveModules: true» в зависимости от того, какую систему css вы используете, вам также нужно убедиться, что ваш css НЕ объединен в один файл, но для каждого css-файла требуется оператор (". css"), который остается внутри выходного файла после свертывания, и этот css-файл существует.
next-transpile-modules
помощью пакета npm.import { Foo,Bar } from "library"
а затем с Babel преобразовать его в ...У нас есть несколько конфигураций накопления, где мы фактически используем оба метода; поэтому для пользователей библиотеки, которые не заботятся о дрожании дерева, можно просто сделать
"Foo from "library"
и импортировать один файл CSS; и для потребителей библиотек, которые заботятся о тряске деревьев и используют только критические CSS, они могут просто включить наш плагин babel.Сводное руководство для лучшей практики:
Используете ли вы машинопись или нет ВСЕГДА
"rollup-plugin-babel": "5.0.0-alpha.1"
собирать с Убедитесь, что ваш .babelrc выглядит так.И с плагином Babel в свертке выглядит вот так ...
И ваш package.json выглядит как минимум так:
И, наконец, ваши внешности в свертке выглядят как минимум такими.
Почему?
И наконец, вот пример файла конфигурации выходного файла с единственным index.js. https://gist.github.com/ShanonJackson/deb65ebf5b2094b3eac6141b9c25a0e3 Где целевой src / export / index.ts выглядит следующим образом ...
Дайте мне знать, если у вас возникли проблемы с babel, накопительным пакетом или у вас есть вопросы по комплектации / библиотекам.
источник
Можно создать отдельные файлы для каждого компонента. Webpack имеет такую возможность, определяя несколько входов и выходов. Допустим, у вас есть следующая структура проекта
Файл Webpack будет выглядеть примерно так
Более подробная информация о «разделении кода» находится в документации по Webpack.
В
package.json
файле есть одно поле с именемmain
, и его значение следуетlib/index.js
указывать в соответствии с приведенной выше структурой проекта. И вindex.js
файле все компоненты экспортируются. В случае, если потребитель хочет использовать один компонент, это можно сделать, просто выполнивНу, решать тебе. Я обнаружил, что некоторые библиотеки React публикуются оригинальным способом, другие - в комплекте. Если вам нужен процесс сборки, определите его и экспортируйте в комплекте версию.
Надеюсь, на все ваши вопросы ответили :)
источник
Вы можете разделить ваши компоненты, как это делает lodash для их методов.
Вероятно, у вас есть отдельные компоненты, которые вы можете разрешить импортировать отдельно или через основной компонент.
Тогда потребитель может импортировать всю упаковку
или его отдельные части
Потребители будут создавать свои собственные пакеты на основе компонентов, которые они импортируют. Это должно предотвратить загрузку всего вашего пакета.
источник
Вы должны взглянуть на Bit , я думаю, что это хорошее решение для обмена, повторного использования и визуализации компонентов.
Это очень легко настроить. Вы можете установить свою битовую библиотеку или просто компонент с:
Затем вы можете импортировать компонент в ваше приложение с помощью:
Хорошая часть заключается в том, что вам не нужно беспокоиться о настройке Webpack и всего этого джаза. Bit даже поддерживает управление версиями ваших компонентов. В этом примере показан компонент реакции списка заголовков, поэтому вы можете посмотреть, соответствует ли он вашим требованиям или нет
источник
В веб-пакете есть конфигурация для создания чанков. Для начала создадим основной пакет на несколько кусков и загрузим его по мере необходимости. если ваш проект имеет хорошо структурированные модули, он не будет загружать код, который не требуется.
источник