Я изучаю Nx с Angular (относительно новым для обоих) и пытаюсь выяснить, как создать библиотеку компонентов, которая:
- Может запускать Storybook и
- Можно импортировать по одному компоненту за раз, вместо перетаскивания всего модуля / всех компонентов в приложение, для которого требуется один компонент. (Чтобы избежать добавления ненужного кода / раздувания в мой комплект).
Таким образом, идеальная установка выглядит примерно так:
repo
|--apps
|--normal-app (can import just card or button, without pulling in both)
|--libs
|--ui (lists individually exportable components, and has a servable Storybook)
|--.storybook
|--card
|--button
Следуя обоим общим учебникам Nx, которые показали, как чтобы создать общую библиотеку компонентов, а также руководство по настройке Storybook в Nx , я сгенерировал библиотеку пользовательского интерфейса и настроил схему Storybook c (если это правильный способ сказать это) для этого каталога lib.
Надежда заключалась в том, чтобы все мои общие компоненты были в одной библиотеке, а Storybook настроен на автоматическое создание и обслуживание историй для каждого компонента, но затем можно было по отдельности извлекать компоненты из этой библиотеки в другие приложения без извлечения всей громоздкой библиотеки пользовательского интерфейса.
Я успешно собрал библиотеку пользовательского интерфейса и два компонента в ней. Я успешно настроил сборник рассказов в этой библиотеке. Затем я импортировал UIModule из файла index.ts (API publi c) в библиотеку пользовательского интерфейса и использовал один из двух компонентов в моем шаблоне.
Но затем, когда я собрал приложение, которое импортировало библиотеку lib, производственная сборка содержала обоих компонентов, хотя я использовал один из них. Это имеет смысл, так как я импортирую UiModule. Это, однако, не идеально.
Я надеюсь создать установку, которая позволяет размещать компоненты в библиотеке с установкой Storybook, которую можно импортировать по отдельности .
Есть ли способ сделать это без кардинального изменения настроек NX? Пока я изучил два основных варианта. Один из них - разбить все компоненты на собственные библиотеки UI, импортировать их в отдельное приложение, настроенное для Storybook, и импортировать их по отдельности в основное приложение. Вот так (попытка № 1):
repo
|--apps
|--storybook-app (imports all)
|--other-app (imports just button)
|--libs
|--button
|--card
Это неидеально по нескольким причинам:
- Не группирует компоненты.
- Он включает в себя гораздо больше шаблонов lib.
- Он не генерирует истории для каждого компонента.
- Требуется, чтобы разработчики не забыли добавить историю в Storybook для каждого компонента.
В качестве второй попытки (# 2) я попытался сгенерировать каждый из компонентов в виде отдельных библиотек в общем каталоге:
repo
|--apps
|--storybook-app (imports all)
|--other-app (imports just button)
|--libs
|--ui (just a directory; not a "project")
|--button (module; has separate component dir beneath)
|--card
Это имеет ряд собственных недостатков:
- Все еще не может автоматически генерировать истории.
- Неясно, где должна быть моя книга рассказов. Это автономное приложение, как на приведенной выше диаграмме дерева? Это, кажется, не идиоматизм c. Я попытался поместить его в каталог
ui, но, поскольку это не «проект», я получаю Cannot find project 'ui', когда пытаюсь сделать это, используя расширение VSCode NX. - Я должен сгенерировать оба библиотека и компонент внутри библиотеки для каждого компонента пользовательского интерфейса. Это дополнительный шаблон, дополнительный код и дополнительная возможность для ошибок.
- Мне кажется, что Сборник рассказов не должен быть приложением, поскольку он может обслуживаться нормально, но имеет свои собственные команды обслуживания.
Я мог бы создать одну из версий описанный выше (# 2, вероятно), но я подозреваю, что есть лучшие практики для того, что похоже на случай общего использования. Кажется, что большая часть моего замешательства связана с введением зависимостей Angular. (В приложении React вы могли бы просто импортировать компонент, но в Angular каждый компонент принадлежит модулю, и это, в частности, также необходимо внедрить. Является ли плохой практикой указание компонента c модули?)
Кто-нибудь знает идиоматический / передовой метод для удовлетворения этих идеальных спецификаций (общая библиотека сборника рассказов с отдельными экспортированными компонентами или разделенные компоненты с автоматически сгенерированными историями в NX)?