Создание согласованных компонентов в ваших проектах
Одна из задач, над которой старший Front-end разработчик начнет думать после многих лет разработки, - это как найти одну библиотеку пользовательского интерфейса для всех интерфейсных проектов. Самое сложное - это конфигурация. Спасибо сообществу и проекту https://nx.dev/; теперь стало проще и понятнее. Я рассмотрю старые способы достижения этого и то, как мы можем сделать то же самое, используя инструменты NX. А затем я расскажу о некоторых важных заметках в рабочей области интерфейсных проектов, которые я узнал во время своего жизненного опыта.
Библиотека общих компонентов пользовательского интерфейса в Angular
Самый простой способ узнать, как создавать библиотеки в Angular, - это просмотреть их руководство на их веб-сайте по следующей ссылке:
В документации подробно рассказывается о создании и настройке библиотеки, но все волшебство исходит от следующей команды:
ng generate library <my-lib>
Фактически эта команда создаст подкаталог в ./projects и создаст вашу библиотеку внутри этого каталога. После этого у вас будет файл с именем public_api.ts, в который вам нужно будет экспортировать все компоненты, которые вы хотите использовать в других проектах. Использовать вашу библиотеку в других проектах так же просто, как импортировать компоненты из имени библиотеки, не беспокоясь о связывании с этой библиотекой, потому что предыдущая команда автоматически добавит библиотеку в файл angular.json, и это сделает его доступный из корневого проекта, используя только имя библиотеки, например:
import { YourComponent } from ‘library-name’;
Если вы хотите опубликовать свой компонент в пакетах npm и использовать библиотеку напрямую, установив ее, просто вам нужно вызвать следующую команду в проекте библиотеки:
npm publish
Имейте в виду, что вам необходимо указать версию, имя и сведения о вашем пакете в packages.json, а также добавить необязательный readme.md о том, как использовать ваши компоненты.
Общая библиотека компонентов пользовательского интерфейса в Angular с использованием NX
Создать общую библиотеку с помощью NX так же просто, как и раньше, без использования NX, все дело в выполнении следующей команды:
ng g @nrwl/angular:lib <my-lib>
Созданный файл index.ts будет местом для экспорта общедоступных компонентов, а для добавления компонентов вы можете использовать следующую команду:
ng g component <component name> — project=<project name> — export
Хорошая вещь в NX framework - это граф зависимостей, запустив:
npm run dep-graph
Таким образом, он покажет вам зависимость между вашими проектами и библиотеками.
В NX будет достаточно только напрямую импортировать библиотеку в проект, который хочет ее использовать, потому что она уже определена в файле angular.json, как я обсуждал ранее в предыдущем абзаце.
import { Component } from ‘@workspace_name/library_project_name’;
Общая библиотека компонентов пользовательского интерфейса в React
Обычно лучший способ создать общую библиотеку в React - использовать пакет create-react-library по следующей ссылке:
Он будет использовать накопительный пакет для создания библиотеки, затем вам нужно будет импортировать эту библиотеку с помощью следующих команд:
npm link (At the directory of the library) npm link library-name (At the directory of your project)
Итак, в этом случае вы создаете локальную ссылку между вашим проектом и своей библиотекой, хорошо то, что вы можете создавать библиотеку автоматически всякий раз, когда вы вносите изменения в код, используя следующую команду:
rollup — watch
Таким образом, любое изменение в вашей библиотеке приведет к тому, что ваш проект также будет перестроен и примет новые изменения.
Вы также можете опубликовать библиотеку в некоторых репозиториях, таких как npm, а затем установить ее прямо в свой проект, как я уже говорил ранее.
Общая библиотека компонентов пользовательского интерфейса в React с использованием NX
Вы можете легко создать общую библиотеку для React, используя следующую команду:
ng g @nrwl/react:lib <my-lib>
Это также приведет к созданию файла с именем библиотеки, который должен экспортировать общедоступные компоненты внутри этой библиотеки.
NX также поддерживает команду для создания компонента внутри этой библиотеки:
ng g @nrwl/react:component <component name> — project=<project name>
В NX будет достаточно только напрямую импортировать библиотеку в проект, который хочет ее использовать, потому что она уже определена в файле angular.json.
import { Component } from ‘@workspace_name/library_project_name’;
Важные примечания в рабочей области интерфейсных проектов
1. Всегда создавайте проект библиотеки только для хранения статических файлов (шрифты-значки-изображения-сценарии-стили), так что в этом случае у вас будет единое место для управления ресурсами проекта, и у вас будет согласованность, особенно в стилях во всех ваших FE. В NX я сделал это, создав пустой проект библиотеки и поместив туда все эти файлы, а внутри файла angular.json для каждого проекта в разделе ресурсов вы должны указать на этот проект следующим образом:
И внутри кода я импортирую стили прямо из их путей, как показано ниже:
2. Было бы также лучше, если бы вы могли определить все вызовы своих серверных API в отдельном библиотечном проекте, чтобы снова у вас была согласованность в работе с серверной частью во всех ваших интерфейсных проектах, а в случае с серверной частью модификации, обновите одно место. В NX я использовал клиент Apollo либо для конечных точек REST, либо для конечных точек GraphQL, структура библиотеки проекта была следующей:
Внутри клиентов я определяю клиентов Apollo, а внутри config и добавляю глобальную конфигурацию, такую как пути, и внутренние службы, я добавляю общие службы для проектов, а внутри account.ts как в примере, который я добавлены запросы GraphQL и Мутации. Я создал свой файл для каждой бизнес-логики.
3. Всегда помещайте все общие компоненты в один отдельный библиотечный проект.
4. Было бы лучше разделить глобальные стили и определить их в проекте ресурсов с помощью CSS или SCSS, а также стили для конкретных компонентов и определить их внутри файлов компонентов, где я использовал библиотеку @emotion для достижения этой цели. Следующая ссылка содержит хороший обзор наиболее возможных способов реализации стилей в интерфейсных проектах:
Https://www.sitepoint.com/react-components-styling-options/
@emotion не рассматривается в этой ссылке, но я предпочитаю его в основном для стилей компонентов. Я предпочитаю структурировать глобальные ресурсы в следующей структуре:
Где в constants.scss я определяю цветовую палитру, размеры шрифта и другие типы констант бренда. В файле skeleton.scss я определяю структуру элементов HTML, таких как поля, ширина, высота… и т. Д. В файле skin.scss я определяю все, что связано со стилями скинов, такими как цвета, шрифты, границы, фон и т. Д. В index.scss обычно я помещаю стили основные элементы документа и любые переопределения в других библиотеках, таких как bootstrap.
Я надеюсь, что эти заметки помогут вам сделать следующий проект более понятным и организованным.
