🤓 Краткий обзор

Angular CLI - ценный инструмент, который каждый разработчик Angular использует для простой инициализации, разработки, формирования и обслуживания своих приложений.

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

Конечно, были некоторые хаки, такие как использование ng-eject или экспериментального Architect API, но это было рискованно и сложно.

К счастью, с выпуском Angular 8 экспериментальный API-интерфейс Architect был хорошо определен и стабилизирован, и хорошие люди в сообществе Angular создали специальную библиотеку компоновщика веб-пакетов. Эта библиотека дает нам возможность легко подключиться к конфигурации веб-пакета.

Мы не собираемся углубляться и объяснять, как это работает под капотом. Вместо этого я перенаправлю вас на отличную статью, написанную Евгением Барабановым, где он все подробно объясняет.

🦄 Настройте конфигурацию своего веб-пакета

В нашем примере мы собираемся расширить конфигурацию веб-пакета по умолчанию двумя вещами:

  1. Мы добавим плагин под названием webpack-notifier, который использует пакет node-notifier для отображения системных уведомлений о состоянии сборки для пользователя.
  2. То, чем я давно хотел заняться; Добавьте загрузчик postcss.

Приступим 😎

Во-первых, нам нужно создать новое приложение Angular 8:

npx @angular/cli new appName

Далее нам нужно установить библиотеку angular-builders:

npm i -D @angular-builders/custom-webpack

Теперь нам нужно изменить параметр builder в полях architect.build и architect.serve на следующее:

С этим изменением, когда мы запускаем ng serve или ng build команды, Angular будет использовать наш собственный конструктор. Построитель запустит ту же сборку, что и стандартная, с дополнительными параметрами, которые указаны в предоставленной конфигурации файла webpack.

Посмотрим на файл webpack.config:

Мы можем предоставить частичный объект конфигурации веб-пакета с дополнительными вещами, которые нам нужны. В нашем случае мы используем API w ebpack для добавления загрузчика postcss, чтобы мы могли применить плагин postcss-short и плагин WebpackNotifierPlugin, как мы упоминали ранее.

Разработчик позаботится об объединении дельты с существующей конфигурацией, предоставляемой Angular.

Теперь мы можем использовать API плагина postcss-short, например, добавим сокращенное свойство size:

div {
  size: 300px;
}

Давайте запустим приложение с помощью команды npm start и просмотрим результат:

Мы видим уведомителя и перенесенный CSS. Вот так просто.

Библиотека также предоставляет такие параметры, как настраиваемые стратегии слияния, настраиваемая функция конфигурации веб-пакета и многое другое. Рекомендую заглянуть в документацию.

Удачного взлома! 💻

🚀 Вы уже пробовали акиту?

Одна из ведущих библиотек государственного управления, Akita использовалась в бесчисленных производственных средах. Он постоянно развивается и совершенствуется.

Будь то объекты, поступающие с сервера, или данные о состоянии пользовательского интерфейса, у Akita есть специализированные хранилища, мощные инструменты и индивидуальные плагины, которые помогают управлять данными и устраняют необходимость в огромных объемах шаблонного кода. Мы / я очень рекомендую вам попробовать.



🚀 Представляем Akita: новый шаблон управления состоянием для приложений Angular
Каждый разработчик знает, что управление состоянием сложно. Постоянно отслеживая, что было обновлено, почему и… netbasal.com





10 причин, почему вам следует начать использовать Akita в качестве решения для управления состоянием
Управление состоянием повсеместно присутствует в веб-приложениях, больших или малых. Одним из замечательных решений в этой области является… engineering.datorama.com



Подпишитесь на меня в Medium или Twitter, чтобы узнать больше об Angular, Akita и JS!