От автора: Angular CLI – инструмент командной строки для создания приложений на Angular. За последний год он стал самым главным инструментом среди разработчиков на Angular. CLI автоматизирует множество задач, возложенных на разработчика в 2017 году. Начиная с конфигурации, которая идет по умолчанию, этот инструмент «выпекался» в лучших практиках, найденных сообществом за долгое время, и с его помощью можно создавать обслуживаемый код. CLI представляет парочку мощнейших возможностей Angular, и это простота в освоении, быстрый разгон по сравнению с самостоятельной установкой.
Если вы еще не пользуетесь преимуществами CLI, это легко исправить. Скажем, у вас установлены node и npm. С помощью четырех команд ниже вы можете быстро поднять Angular и CLI.
1 2 3 4 |
npm install —g @angular/cli ng new my-angular-project cd my-angular-project ng serve |
Пробежимся
Angular CLI сильно изменился за последние пару месяцев. Можете посмотреть большие заметки о прогрессе на странице релиза. Однако нужно посмотреть, что случилось с этим инструментом за последние 4 месяца.
1.2 июнь 2017
Флаг —minimal
С помощью флага minimal разработчики могут генерировать маленькие упрощенные стандартные проекты. Сгенерированные с этим флагом проекты отличаются от обычных:
Инлайновые стили – стили хранятся напрямую в файлах компонента
Инлайновые шаблоны – шаблоны хранятся напрямую в файлах компонента
Нет тестов – проект не генерирует юнит и комплексные тесты
Билды с именами
При использовании ленивой загрузки в Angular мы будем генерировать набор файлов, который будет подгружаться роутером Angular только при необходимости для запрошенного пользователем роута.
При создании продакшн билда имя задается цифрами в последовательности процесса создания.
0.46af283b5453c1d30d30.chunk.js
1.2b2a029972b8935a384a.chunk.js
Теперь при создании билдов используются имя модуля. Оно выступает в качестве подсказки и является частью процесса создания билда. Имя помогает с дебагом в билдах, которые не идут в продакшн.
admin.module.chunk.js
home.module.chunk.js
Дедупликация лицензии и изоляция
Angular, как и множество других сторонних проектов, часто подключает сотни отдельных файлов со своими лицензиями. CLI всегда помогает разработчикам с совместимостью, объединяя лицензии в процессе построения билда.
Сейчас для уменьшения размеров билда мы извлекаем эти лицензии в отдельный файл 3rdpartylicenses.txt и удаляем дублирующие лицензии.
1.3 август 2017
Уменьшение веса билда
С каждым релизом мы тщательно работаем над улучшением качества кода, генерируемого CLI в продакшн билдах. В этом релизе мы задействовали последние возможности Webpack 3, в том числе и поднятие видимой области.
Также мы включили бета нового инструмента, над которым мы сейчас работаем. С его помощью можно удалять ненужный код. Инструмент называется build optimizer. Для активации используйте следующий флаг:
1 |
ng build --prod --build-optimizer |
Мы проверили инструмент на собственном сайте angular.io. Размер продакшн билда сократился на 52%.
Angular Universal
Серверный рендеринг – отличный способ повысить восприятие производительности приложения. Ваше приложение станет лучше работать с ботами типа Twitter и Facebook*, которые заходят на ваш сайт, когда пользователи делятся контентом.
Angular Universal вошел в релиз Angular v4 и включал в себя все необходимые API для рендеринга приложения на сервере. Universal Support в CLI упрощает этот процесс, разрешая создавать второе CLI приложение с помощью конфига .angular-cli.json. Этот конфиг оборачивается вокруг основного приложения и позволяет генерировать билд server.
Начальная поддержка для ранних бета v5
Angular делает основные релизы примерно раз в 6 месяцев. Команда делает все в Open Source, поэтому в ранней бета версии в Angular мало функционала. Но людям может приглянуться этот инструмент, а команда Angular всегда надеется на обратную связь от ранних тестов.
Вы можете протестировать предстоящие релизы Angular и дать свой отзыв. Релиз Angular 5.0.0 потребует последней версии CLI.
1.4 сентябрь 2017
Schematics
Schematics – один из главных проектов команды CLI. Schematics позволяет запускать произвольный код для трансформации дерева – это способ автоматического написания кода и генерации файлов. Эти возможности позволяют создавать свои шаблоны для ng new и ng generate под ваш стиль или компанию, строить поверх предоставляемых шаблонов. Также вы можете генерировать код по форме и ответу от удаленного API.
Schematics постоянно развивается, а совсем скоро начнется написание документации. Чтобы доказать пригодность и техническую основу Schematics, мы автоматически включили этот инсутрмент в релиз CLI 1.4.
Будущее CLI
У команды CLI множество планов, которые должны сделать жизнь разработчиков еще проще. Вот несколько идей, которые команда надеется включить в будущие релизы (но не обещает):
Режим Ahead of Time Compilation по умолчанию – команда Angular усердно старается сделать компиляцию еще быстрее, и как только компилятор достигнет того уровня производительность, который мы наблюдаем сейчас, мы включим режим AOT по умолчанию. Это устранит проблемы, когда разработчики сталкивались с различиями в двух режимах.
ng update — Angular регулярно выпускает патчи, небольшие и крупные обновления. У CLI может появиться возможность информировать вас о появлении обновлений. Команда Angular работает над инструментами для Material и для других стран по автоматическому обновлению. Инструмент должен сам будет разбирать изменения, а CLI идеальное место для этого.
Поддержка библиотек – сегодня CLI может делать оптимизированные UMD для браузера и оптимизированные пакеты CommonJS для сервера. Что если бы CLI умел делать пакеты для других приложений Angular?
Build Optimizer по умолчанию — Build Optimizer многообещающий инструмент, с помощью которого разработчики могут передавать в браузер крайне маленькие пакеты. Как только этот инструмент пройдет проверки и будет одобрен сообществом, мы включим его по умолчанию.
Service Worker по умолчанию – мы верим в том, что процесс создания хороших веб-приложений включает в себя версию приложения под Progressive Web App (PWA) с сервис воркером. Мы верим, что эти инструменты можно включить по умолчанию, не разрушая ожиданий разработчиков относительно общих задач типа удаления или обновления. Надеемся сделать это в будущем.
Начнем
Разработчики Angular по всему миру выбирают CLI, как самый легкий способ создания приложений на Angular. Попробуйте CLI и вы на новом или существующем проекте. Пишите нам, помог ли вам наш инструмент, а также, что вы еще хотели бы видеть в нем!
Автор: Stephen Fluin
Источник: //blog.angular.io/
Редакция: Команда webformyself.
* Признана экстремистской организацией и запрещена в Российской Федерации.