Angular CLI за межамі ng serve: генераторы, цялевыя пункты, кэш і статыстыка будовы

Большая частка разработчыкаў Angular з самага пачатку выкорыстовае чатыры каманды — ng serve, ng build, ng generate і ng test — і больш не шукае іншых. Гэта падходзіць для маленькага прыемніка, але калі працоўны простор расте, час, які прабывае на напісванні стандартных фрагментаў коду, пошук версійных номераў, адгадванні розмеру пакета і лагаванні несправных кэшаў, стае значным. Командная лінія ўжо мае рашэнні для большай часткі такіх завад. У гэтым кяле показаны варыянты, якія варта прыемліць як звычку, пояснены, калі кожны з іх дапамагае, і прадставлены стислы ўседзённы працоўны процес, які можна застосаваць без змян.

Якщо вы яшчэ на стадіі стварэння самага працоўнага простору, інструкцыя па стварэнні сучаснага проекту Angular пакрывае гэтую частку; усё, што напісана нижэй, предполагае, што проект вялікі ўжо існуе.

Адаптавайце ng generate да ўсё большым чынам

Генератор – это команда, вядомая всім у сваёй повной форме:

ng generate component user-profile

Кожны генератор мае короткі аліяс, таму generate стае g, а component – c:

ng g c user-profile

Настоямыя заўтрэчкі даходзяць ад флагаў. Калі маленькі прэzentатыўны компонент не патрабуе файла спецыфікацыі, --skip-tests не дазволяе CLI ствараць такі файл:

ng g c user-profile --skip-tests

По значэнню за зманкой кожны компонент зберагаецца ў сваёй сабе папке. --flat замест таго запісвае файлы безпосередна ў текущую дырэктарыю, што падходзіць для маленьких компонентаў, якія знаходзяцца ля свайго родніка:

ng g c user-profile --flat

Флагі можна сумаваць, таму вы можете запрашваць іх адразу:

ng g c user-profile --flat --skip-tests

Тыя жа аптаваленні прыменяюцца да сэрвісаў, дыректываў, пайпаў, захоўнікаў і іншых схематыкаў. Дазволенне гэнератору ствараць файлы падтрымлівае адносна стабільную назву і структуру ў всім калектываў. Дадзіце --dry-run, каб пазырнуць, што стварыць схематыка, не пісаючы нічога.

Запытайце CLI замест таго, каб шукаць у інтэрнете

Спяшны спосаб разбіраць, што можа зрабіць гэнератор, — запытаць яго. Гэта паказвае ўсія доступныя схематыкі:

ng generate --help

Алія працуе так сама:

ng g --help

Дадзенне --help пасля конкрэтнай схематыкі выдруквае ўсе яе аптаваленні з кароткімі апісаннямі:

ng g component --help

Аптаваленні зміняюцца межы выданняў, а адпаведзі на форумах часта описваюць старэе пазначкі; выход дапамогі завжды адпавядае CLI, установленаму ў вашым проекте.

Чытайце і зменяйце настройкі за дапамогою ng config

Канфігурацыя працоўнага прастору знаходзіцца ў файле angular.json, і бывае спакуса зменіць гэты файл безпасяродна. CLI аддае команду для чытання і запісу гэтых значэнняў:

ng config

Калі яе запусціць сама по сабе, яна выведзе канфігурацыю, ўжо тады можна будзе пазнакоміцца з установленымі настройкамі:

ng config

Таксама можна перадаць шлях у формате JSON, каб прачытаць адно значэння, або шлях заўважыты з значэннем, каб яго выставіць, напрыклад, каб змяніць параметр CLI для всего працоўнага прастору. У скрыптах вялікія перавагі мае павтаральны вызов ng config пры парэльных ручных змяненах JSON: калі файл контролюецца CLI, выкорыстоўваюцься саме інструменты CLI для його змены.

Адзвярніцеся пра свое сераўерскай средзе з выкарыстоўваннем версіі ng

Калі ўтвараюцца проблемы, важлівыя ўсё тое самае точныя версіі. У замест на адкрыванне файла package.json і самастайнае складанне інформацыі, запускайце:

ng version

або яго скрацаную версію:

ng v

У выходных данных адресавана версія Angular CLI, установленыя пакеты Angular, Node.js, менеджер пакетаў і аперацыйная система ў аднам блоке. Гэта самэ тое, калі трэба колеге або адпаведальнам за проект, калі прасіце па дапамозі. Адчытка, якая толькі пазначае, што проект перестаў працаваць, не дае ім нічога для далейшага аналізу, тады як копіюванне выходных дадзеных з наступнага каманды адпаведзае на першыя пяць іх запытанняў з самага пачатку:

ng version

Замерыце розмер пакета для выпуску, а не проста здагадваліцеся

Этот флаг для кампіляцыі заслуговае на значна большое выкарыстанне, чым яго фактычна викорыстоўваюць:

ng build --stats-json

Ён запісвае файл статыстык, який описвае, што знаходзіцца ў кожным фрагменте выходных дадзеных. Перадайце гэты файл аналізатору пакетаў, і вы отрымайце візуальны апіс, звядзе где беруцца байты. Згадаўце, што формат файла залежыць ад інструмента для стварэння: старыя версіі, базаваныя на webpack, ствараюць статыстыку webpack, тады як новэйшы інструмент для стварэння аплікацый, базаваны на esbuild, выдае метаданы esbuild; таму выберыце аналізатор, які розумее выходны файл вашага інструмента, і пераканайцеся ў актуальных документах Angular для вашай версіі.

Тыповыя прычыны, калі аплікацыя работае медленна, включаюць:

• адну бібліятэку трэцьяго сторонньага размеру, якая занадта велика
• фрагменты, якія значна большыя, чым прыпускалася
• тую ж залежнасць, якая запакована больш чым раз
• калькі важкіх компонентаў, якія запрашваюцца пад час першага завантажэння
• функцыі, якія запрашваюцца з адзінаковасцю, і якія вырашыліся большымі, чым планавалася

Нічна з гэтых элементаў не ёсць видным сама па сабе. Порэшанне статыстыкі да і пасля апградацыі залежнасцяў — гэта просты спосаб разгледзець регрэсіі.

Ачысці кеш пад час занова інсталлявання всего

CLI зберагае кеш на дыску, таму павтаральныя запускі будуючых процэсаў вядуцца быстрей. Команда ng cache карыстаецца ім; ng cache info паказвае, дзе знаходзіцца кеш і чы робіцца яго викорыстоўванне:

ng cache

Калі запускі будуючых процэсаў пачынаюць ведацца некалькі інакш, ачысцэнне кеша часта ёст тое, што трэба:

ng cache clean

Старыя элементы кеша часта з’яўляюцца пасля змены залежнасцяў, апградацыі Angular чы перайшох на іншую галузь з разнымі версіямі пакетаў. Ачысцэнне кеша займае калькі секунд, таму спробаваць яго трэба раней, чым прыймаць медленны спосаб — выдаленне node_modules і зановае інсталляванне.

Працаваць з лінтаром локальна і ў CI

Якщо у вашам проекте налаштаваны лінтар, запускайце яго за дапамою:

ng lint

У новыя версіі Angular па замовчанню няма лінтара, таму ng lint працюе толькі пасля таго, як вы яго дадзеце, зазвычай через інтеграцію Angular ESLint. Пасля налашоўкі ён выявляе проблемы раней, чым перакладчык змагаецца:

• невыкарыстоўваныя зменны і імпорты
• несувярэннасці у форматаванні
• ймовірныя багі
• нерэкамендаваныя патэрны
• загальныя проблемы з яснасцю коду

Выкананне таго жа каманды ў CI-пайплайне значыць, што проблематычны код фіксуецца раней, чым ён дасягне галоўной гілкі, і ніхто не мусі памяць пра выкананне каманды.

Выконанне тэстаў адной раз у автаматызацыі

У локальных умовах тэсты зазвычай працуюць у режыме стазірання і перыводзяцца ў выкананне пасля кожнага зберэжэння:

ng test

У заданні CI няма прызначэння для процесу, які чакае на змяны файлаў. Аблікаванне режыма стазірання дазволяе камандзе выконаць весь набор тэстаў адной раз і завершыцца:

ng test --watch=false

Код выходу пасуюць інфармацыю пра тое, чыя тэсты пройшлі, і самэ гэта викорыстоўваецца пайплайнам для пазначэння задання як «зелёнага» чы «чырвонага». Пайплайн, які застаецца ў режыме стараннага адстэйкання, проста чакае пакі ўскончыцца тайм-аут. Локальная розработка і CI маюць разныя патрэбы, і адна лінія каманд не павінна задовольняць іх оба.

Назначыце адзін проект у працоўнай зоне з калькама проектаў

Большыя рэпазітарыі Angular часта маюць калькаму аплікацыяў і бібліятэкаў у адной працоўнай зоне. Большасць каманд прыймае назву проекта, таму вы можете збудаваць толькі адну аплікацыю:

ng build my-app

або працаваць толькі з аднай:

ng test my-app

У працоўнай зоне у стылі манорепазітарыя гэта стае звычайным явішчам:

ng build admin
ng build customer
ng test shared-ui

Работа над спакульнаю бібліятэкай UI не павінна значыць перзбудову кожной аплікацыі; праверкі каманд дапамагаюць зменшыць час адгуку.

Выклікніце будь-якую мету архітектара за дапамою ng run

За звычайнымі камандамі стоіць болей загальная каманда, якую толькі некалькі разработчыкаў викорыстоўваюць безпасяродна:

ng run

Яна выканае абраную мету-архітектора з канфігурацыі рабочай прасторы, выкарыстоўваючы формат project:target, за можлівасцю з назвай канфігурацыі:

ng run my-app:build

Стандартныя каманды на самай працоўцы є скораспрыткамі для распашчых метаў. ng run становіцца корыстным, калі рабочая прастора визначае спецыяльныя меты, напрыклад будоўніка, який генеруе код, размешчае прыватную версію або запускае спецыялізаванае тэставанне. Можна супрацаваць з яй каляк «запусціць самэ гэтую мету гэтага проекта», без жадных додатковых вывароў.

Ачыніце дасягальную інфармацыю з тэрміналу

Калі вам трэба быстра пераканацца ў API, CLI можа запусціць пошук за вас:

ng doc

Прадаце ключавое слова, і ён будзе шукаты яго ў афіцыйной дасягальной інфармацыі Angular:

ng doc signals

Заўважкі: рэзультаты адкрыюцца ў вашам браузеры, а не выдрукуюцца ў тэрмінале, таму гэта є скорыяй дарозай да правильнага разделу, а не офлайн-справакой.

Дазвольце дапамозі заменіць запамятовванне

Мабыць, найкорыстнейшы з усіх прывычак — гэты каманд:

ng help

У яму перыядаюцца всі каманды высокага рангу. Чырвоні --help, каб пазначыць опцыі конкрэтнай каманды:

ng build --help

То ж самае дзейсніцца і з генераторамі, нават для адной схемы:

ng generate service --help

Нікому не трэба запамятовваць усе флагі. Працэздатныя разработчыкі — это не тые, хто запамятоввае все; гэта тые, хто ведае, дзе шукать, калі ў чымс забываюць.

Ежадзённы робочы процес, які гэта аднойчы

Практычны рутын можа выглядаць так: запускайце сервер разработки:

ng serve

Падчас стварэння функцыянаў, генеруйце тое, што вам патрэбна, з правымі флагамі:

ng g c profile --skip-tests

Перад зберэнням, адмахніцеся ад памылак і запускіце тэсты раз:

ng lint
ng test --watch=false

Для продакшн-версіі явна выкарыстоўваце настройкі для продакшну:

ng build --configuration production

Калі є пытанні да розмеру пакета, генеруйце статыстыку:

ng build --stats-json

Калі процес стварэння пачынае працаваць некоректна, спачатку ачысціце кэш:

ng cache clean

І ўсё час, калі якая-небудзь опцыя забываецца, запытайце саму команду:

ng <command> --help

Заключэнне

Angular CLI — это інструмент для падвышэння продуктыўнасці ў всім цикле разработкі, і найбольшыя перадчынства даходзяць ад калькі опцый, якія пазбавляюць нас паўтаральнай роботы:

• Генеруйце код з флагамі заместо таго, каб рукамі пісаць шаблонны код
• Апраняйце команды толькі да аднаго проекту ў багатопроектных працовых прасторах

Зьвяржыце пакеты дадзеных з метрамі замест тагаданняў пра ўжыткавасць

Ачысціце кэш пры тым, калі не застосаваеце полную перасстаноўку

Адрабатывайце тэсты без режыму абзірвання ў CI і пераглядайце кэш пасля кожных змян

Апыліваецеся на параметр --help, які завжды пасвядчае вашай установленай версii

Калі наступны раз ачыніце тэрмінал у проекте Angular, памятайце, што за ng крыўдзіцца ўжо больш, чым гэта:

ng serve