Давайте сделаем компоненты снова великолепными!
Как вы, возможно, знаете, современная веб-разработка основана на компонентах, направленных на повышение удобства повторного использования и быстрой разработки.
В этой статье я постараюсь подвести итог тому, как подготовить проект библиотеки с Angular 6+.
Прежде чем начать эту статью, я бы порекомендовал иметь некоторый опыт работы с Angular и Angular CLI, чтобы не заблудиться.
Перво-наперво
Убедитесь, что вы обновили angular-cli и сгенерируете новый проект.
> ng new foo-library > cd foo-library
С новым проектом вам нужно будет создать библиотеку (вы можете сгенерировать несколько библиотек в соответствии с архитектурой вашего проекта).
> ng g library @foo/bar --prefix fb
Примечание. ng generate library имеет несколько дополнительных опций, вы можете проверить их здесь
При этом у вас появится новая папка /projects, в которой должны выполняться все изменения библиотек.
Наш первый компонент
Вот так все просто!
> ng g c counter --project=@foo/bar
Я не буду очень подробно останавливаться на том, как вы сами создаете свою библиотеку, вы можете проверить эту статью, в ней рассматриваются основные концепции.
Давайте просто внесем простые изменения в наш компонент, чтобы сделать его более интерактивным.
Дружественный совет по стилям
Если вас не волнует, как решать потенциальные проблемы со стилями, вы можете пропустить это
Обратите внимание, что Angular имеет инкапсуляцию представления, поэтому, когда библиотека будет опубликована, вы не сможете изменить стиль, добавленный из styleUrl, есть несколько способов избежать этой проблемы, более простой - просто отключить инкапсуляцию представления в вашем такие компоненты, как Angular Material, создают некоторое смешение, которое генерирует БЭМ структуру.
Но лично я предпочитаю использовать гибридное решение микширования и инкапсуляции представлений, но это требует внесения некоторых изменений в процесс сборки, которые я объясню.
Для нашего компонента счетчика вы можете оставить стили, которые не нужно настраивать на counter.component.scss, как это сделали мы. (конечно, в каждом конкретном случае это будет разное)
Затем у вас может быть микширование, которое будет вне инкапсуляции представления, я бы рекомендовал следовать некоторой документированной структуре (например, Bootstrap, Material Desgin)
Например:
При этом у вас будет входной файл, поэтому вам просто нужно один раз импортировать свой файл. Я оставляю этот файл на /src/main.scss.
Итак, проект, который вы будете использовать, вам просто нужно сделать:
И последнее, но не менее важное: вам необходимо создать собственный сценарий сборки для копирования, чтобы избежать постоянного копирования и вставки стилей.
> ng build @foo/bar && node <PATH_TO_YOUR_CUSTOM_SCRIPT>
В этом примере ваша dist папка должна выглядеть так:
Тогда вы готовы опубликовать свой компонент на npm! (не забудьте удалить private: true из package.json проекта библиотеки, подробнее на официальном сайте npm)
> cd dist/foo/bar > npm publish
Тогда просто будьте счастливы и установите новую библиотеку в свой проект.
> npm i @foo/bar
Ждать!! Это еще не конец.
На этом этапе вы должны спросить: «Какого черта я буду делать с папкой приложения (./ src / app) ????», и мы перейдем к самому лучшему.
Хорошая библиотека - это не то же самое без документации по компонентам, которая есть у каждого крупного фреймворка, почему у нас не может быть ее?
Я нашел для этого две хорошие библиотеки, вы можете использовать Storybook (который изначально был создан для React, но вроде как работает с Angular), у вас есть что-то вроде этого:
Но у него есть некоторые проблемы с обновлением компонентов, поэтому вам нужно каждый раз перестраивать компоненты (по крайней мере, пока я его тестировал).
Итак, я нашел UI-Jar, он прост в использовании, и вы делаете свой код самодокументированным.
Чтобы использовать его, вам в основном нужно следовать README.md, затем через 5 минут он будет запущен. Но здесь мы немного изменим и будем использовать его в качестве основного приложения для наших библиотек.
Для начала нужно добавить его в проект
> npm install ui-jar
После этого нужно обновить src/tsconfig.app.json, src/styles.scss, src/main.ts и src/index.html
После этого нам нужно просто обновить наш scripts на package.json
Обратите внимание, что мы используем одновременно для одновременного запуска обеих задач, вам нужно будет установить его перед запуском
> npm i --save-dev concurrently
Теперь нам просто нужно обновить наш счетчик в соответствии с разметкой ui-jar, он будет выглядеть примерно так:
Итак, теперь просто запустите следующую команду и посмотрите наш окончательный результат!
> npm run serve
После заметок
- Тестирование: я очень рекомендую вам вместе со всем этим использовать и Jest, просто потрясающе, насколько это быстро. Вы можете легко установить, следуя этой статье:
- Переводы: невозможно использовать
ng xi18n(дополнительная информация), с ng-packagr вам нужно будет использовать ngx-translate и смоделировать тесты с помощью ngx-translate-testing. - Перезагрузка компонентов UI-Jar. Возникла проблема с перезагрузкой компонентов с UI-Jar (# 47), поэтому я удалил фильтр на часах (может сделать его немного медленнее, но работает. как временное решение) можно установить с моей вилки.
> npm i -D git+https://github.com/picheli20/ui-jar.git#always-refresh
