Создаете новый проект Angular? Вот что вам нужно сделать.

Разработчику программного обеспечения всегда приятно начинать новый проект с нуля, но это сопряжено с огромной сложностью и ответственностью.

В этой статье я делюсь некоторыми советами о некоторых вещах, о которых вам нужно позаботиться на раннем этапе ваших проектов Angular. Это сэкономит вам много времени в будущем, поскольку приложение станет больше и сложнее.

1. Обновить полифиллы

Существует множество браузеров, и поддерживать их все непросто. Angular основан на последних стандартах веб-платформ. Это означает, что старые браузеры могут столкнуться с проблемами при рендеринге вашего приложения Angular.

Скрипты полифиллов, или просто полифиллы, помогают добавить поддержку браузеров, в которых нет последних функций браузера. Полифиллы содержатся в файле polyfills.t.

Обновление и настройка файла polyfills.ts необходимы для обеспечения полной поддержки всех ваших целевых веб-браузеров.

2. Добавить элемент ‹noscript›

Как разработчик, вы иногда сталкиваетесь с редкими случаями, когда кто-то отключает JavaScript в своем браузере. Это может быть сложно отладить.

Здесь пригодится тег ‹noscript›. Вместо того, чтобы просто отображать пустую страницу, когда в браузере отключен JavaScript, вы можете дать пользователю более информативное сообщение об ошибке.

Просто добавьте следующую строку в элемент ‹body› файла index.html <noscript> Your JavaScript is disabled </noscript>

3. Нормализовать CSS

Разные браузеры по-разному отображают элементы HTML. Такие вещи, как: высота строки по умолчанию, поля и размер шрифта будут отображаться по-разному в разных браузерах.

Сброс таблиц стилей - это разумный шаг для обеспечения единообразного отображения вашего приложения во всех браузерах.

В Angular вы можете легко нормализовать или сбросить свой CSS с помощью пакета npm normalize, который является отличной альтернативой сбросу HTML5 CSS.

Чтобы установить пакет normalize, просто выполните следующую команду в корневой папке проекта.

$ npm install normalize.css

Затем импортируйте файл normalize в свой файл styles.css

@import '~normalize.css';

4. Удалите свой код

TSLint - это инструмент анализа, который проверяет согласованность, читаемость и ремонтопригодность вашего стиля кода.

Ваш проект Angular по умолчанию будет иметь файл линтинга tslint.json в корне проекта.

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

Примечание. TSLint устарел в конце 2019 года. ESLint теперь является последним и лучшим, но концепция остается той же.

Более подробное объяснение можно найти в этой статье здесь.

5. Добавить webpack-bundle-analyzer

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

Чтобы получить представление о том, насколько ваш проект Angular зависит от пакетов узлов с открытым исходным кодом, взгляните на содержимое папки node_modules.

Если вы неправильно импортируете эти пакеты узлов в свои компоненты, модули или службу, это может отрицательно повлиять на производительность вашего приложения.

Webpack-bundle-analyzer поможет вам визуализировать размер файлов вашего веб-пакета в интерактивном режиме. Что, в свою очередь, помогает вам принимать обоснованные решения по пакетам, которые потенциально могут замедлить работу вашего приложения.

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

Часто запускайте свой webpack-bundle-analyzer, чтобы убедиться, что размеры пакетов не выходят из-под контроля.

6. Обновить префикс компонента

Когда вы создаете новое приложение Angular, вы получаете префикс по умолчанию: app. всегда полезно обновить его в соответствии с вашими индивидуальными потребностями, например, чтобы название вашей компании или проекта отображалось так, чтобы оно было уникальным.

Просто обновите значение префикса в файле angular.json в соответствии со своими потребностями.

О том, как это сделать здесь, есть хорошая статья.

7. Обновите файл README.md.

Файлы README содержат важную информацию о вашем проекте, в том числе: как начать работу, инструкции по настройке, контактную информацию и т. Д.

Файл README.md по умолчанию вашего проекта Angular содержит информацию о том, как был создан проект, как обслуживать разрабатываемое приложение, создавать приложение, запускать модульные тесты и как формировать код и т. Д.

По мере того, как вы вносите изменения в свой проект, важно, чтобы вы делали то же самое с файлом README.md. Это очень важно для вашей документации и для привлечения новых участников к проекту.

8. Убедитесь, что модульный тест запущен.

Если вы создаете компоненты и службы через Angular CLI, вы по умолчанию получите файлы модульных тестов. Однако вы часто обнаруживаете, что эти модульные тесты не работают успешно.

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

Заключение

Выполнять эти простые вещи на ранней стадии проекта намного проще, чем когда приложение становится большим и сложным.

Если у вас есть несколько советов по другим вопросам, которые следует обновить во вновь созданном приложении Angular, пожалуйста, добавьте комментарий ниже.

JavaScript на простом английском языке

Вы знали, что у нас четыре публикации и канал на YouTube? Найдите их все на plainenglish.io и подпишитесь на Decoded, наш канал YouTube!