Короткие пути импорта TypeScript в Angular9
При работе с Angular импорт файлов в TypeScript - это то, что мы делаем довольно часто. Когда мы импортируем файлы из других родительских каталогов, IDE обычно разрешает пути к файлам импорта. Кроме того, когда мы создаем приложение Angular, компилятор TypeScript компилирует код и создает окончательный пакет JavaScript с помощью Webpack. Поскольку эти важные шаги выполнены, большинство из нас не будет беспокоиться об улучшении этих путей импорта.
Однако у нестандартизации этих путей в долгосрочной перспективе есть несколько недостатков. В этой статье я сначала объясню, почему вы должны сделать это в первую очередь в любом проекте Angular, а затем проведу вас через шаги, как это сделать.
Почему важно стандартизировать пути импорта TypeScript?
Существует несколько причин, по которым вам следует настроить псевдонимы путей импорта для вашего проекта Angular.
Выглядит хорошо
Первое, что вы заметите, когда добавите псевдонимы путей - это четкость путей импорта, по которым мы можем быстро определить местоположение файла. Вы можете сравнить следующие два примера, чтобы понять это. Во-первых, давайте посмотрим, как выглядит код компонента без псевдонимов импорта.
import { Component, OnInit } from '@angular/core';
import { ArticleForm } from '../../../views/article-form/article-form';
Этот код изменится на следующий, как только мы добавим псевдоним пути для представлений.
import { Component, OnInit } from '@angular/core';
import { ArticleForm } from '@views/article-form/article-form';
Подумайте только о нескольких импортах с относительными путями, некоторые с глубокими ссылками, насколько это может быть уродливо. Я считаю, что последнее выглядит намного лучше для ясности импорта.
Определяет стиль кодирования
Другим важным аспектом наличия псевдонимов путей является то, что сами псевдонимы будут действовать как документ, не смешивающий относительные и абсолютные пути. В противном случае, если разработчик выберет абсолютный или относительный путь на основе предпочтений, он не будет однородным. Следовательно, определяя набор псевдонимов, мы можем обновить стили кодирования, чтобы они соответствовали преобразованиям псевдонимов, определенным для проекта.
Помогает рефакторингу
По сравнению с двумя вышеупомянутыми причинами, поддержка рефакторинга является наиболее важным преимуществом при использовании псевдонимов. Когда мы перемещаем папку или файл в проекте Angular, IDE отлично справляется с корректировкой некоторых операций импорта. Но было сложно изменить оставшиеся относительные пути, поскольку мы должны изменить их для другого относительного места. После того, как были установлены правильные псевдонимы, стало намного проще иметь дело с ручным изменением пути.
Кроме того, если вы хотите выполнить автоматический импорт из VSCode для использования абсолютных путей, вы можете выполнить следующие два шага.
- Шаг 1. В VSCode перейдите к
File>Preferences>Settings>User Settings - Шаг 2: Найдите свойство
typescript.preferences.importModuleSpecifierи установите его значениеnon-relative.
Настройка псевдонимов путей с помощью Angular9
При назначении псевдонимов коротких путей мы должны убедиться в двух вещах. Во-первых, ваша IDE может выделить правильные или неправильные пути импорта. Если ваша IDE не может распознать правильность, это контрпродуктивно. Тогда совершенно очевидно второе, где компилятору TypeScript необходимо идентифицировать эти пути. Итак, давайте подробно рассмотрим каждый шаг.
Шаг 1. Определите нужные псевдонимы
Первый шаг - определить список корневых каталогов для этих псевдонимов. Помните, что наличие большего количества псевдонимов путей не означает, что будет лучше, поскольку разработчики должны их запоминать. Поэтому достаточно иметь несколько уникальных. Обычно я думаю о структуре зависимостей и устанавливаю следующие псевдонимы.
@app@views@containers@store@services
Шаг 2. Измените tsconfig.json
{
"compileOnSave": false,
"compilerOptions": {
"baseUrl": "./src",
"paths": {
"@angular/*": [ "../node_modules/@angular/*" ],
"@app/*": ["app/*"],
"@views/*": ["app/views/*"],
"@containers/*": ["app/containers/*"],
"@store/*": ["app/store/*"],
"@services/*": ["app/services/*"]
},
...
}
Обратите внимание, что здесь важна настройка baseUrl, чтобы IDE (я использовал VSCode) распознала правильные пути для IntelliSense.
Шаг 3. Измените tsconfig.app.json
После завершения шага 2 я обнаружил, что сборка Angular9 работает некорректно. Потом я понял, что проблема в файле tsconfig.app.json.
Разница в том, что я удалил следующий сегмент пути tsconfig.app.json и переместил в tsconfig.json
"paths": {
"@angular/*": [ "../node_modules/@angular/*" ]
}
После удаления tsconfig.app.json у него нет ссылки на переопределение путей, где сборка Angular9 использует свойство paths, определенное в файле tsconfig.json.
После выполнения этих шагов мне пришлось вручную обновить импорт по всему проекту. Поэтому я считаю, что это лучшая практика, которую вы должны делать на самой ранней стадии проекта, чтобы избежать дополнительных усилий.
Я надеюсь, что статья будет полезна для понимания рационального использования псевдонимов путей и шагов по их настройке.
