Пару месяцев назад мы с друзьями решили, что пришло время заняться проблемой, которую мы обещали решить когда-нибудь в прошлом. Мы решили, что для этого лучше всего использовать agile kanban для создания нашего решения, и меня попросили сыграть роль лидера по интерфейсу и дизайнера UI / UX. Это произошло потому, что у меня было больше опыта в этой области, чем в других областях жизненного цикла разработки программного обеспечения. В этой роли мне приходилось проверять все запросы на вытягивание, поступающие в интерфейсную часть, периодически просматривать кодовую базу на предмет технических долгов, а также следить за тем, чтобы мы придерживались передовых практик.
Через две недели по этому пути я обнаружил, что трачу больше времени, чем я выделил для этих обзоров. Сначала мне показалось, что я недооценил свой Todo, поэтому я увеличивал время, но каждый раз я тратил больше времени, чем планировал. Итак, я начал анализировать, что происходит, и понял, что большая часть этого времени была потрачена на поиск файлов зависимостей (относительных модулей JavaScript), которые импортируются в начало файлов. Мне казалось, что я пытался выполнить какое-то вычисление (в своей голове) 😂, чтобы узнать, где эти файлы находятся в кодовой базе по мере ее роста.
Ниже приведен пример того, как будут выглядеть эти операторы импорта.

Я начал исследовать более эффективные способы импорта файлов (относительных модулей) и наткнулся на псевдонимы путей. 🎉 Псевдонимы пути или псевдонимы - это предварительно сконфигурированные имена, используемые для замены длинных путей в файлах и преобразования в определенные каталоги в базе кода. Существуют различные способы достижения этого, начиная от настройки разрешения веб-пакетов (React), используя псевдоним модуля и в TypeScript, настраивая baseUrl и пути в файле tsconfig. Мы немного рассмотрим их.

Вариант первый: настройка разрешения веб-пакетов

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

Теперь вы можете импортировать файлы и соответствующие модули, используя псевдоним.

Вариант второй: настройка tsconfig.

Если вы используете TypeScript, следует помнить о двух свойствах tsconfig. Это свойства baseUrl и paths.

  • baseUrl: используется, чтобы сообщить TypeScript, где начать разрешение относительного импорта. Он принимает строку, которая указывает, где TypeScript будет располагать относительные модули и файлы. Обычное значение, установленное для этого - «.» что означает относительно файла tsconfig. Однако большинство разработчиков предпочитают иметь модули проекта в каталоге src, который будет относиться к файлу tsconfig. Для этого значение baseUrl будет «./src».
  • сопоставление путей: часто у нас есть зависимости, которых нет в корневом пути нашей кодовой базы (относительно файла tsconfig). Независимо от этого, мы все равно можем захотеть присвоить этим модулям / зависимостям псевдонимы при их импорте в нашу кодовую базу. Использование свойства paths в tsconfig предоставляет нам более сложные способы сопоставления и разрешения псевдонимов. Сопоставление путей будет разрешено относительно baseUrl, а не tsconfig. Поэтому, если вы установите для baseUrl значение, такое как «./src», тогда вам нужно будет записать сопоставления путей с «./src/» в качестве корневого пути для сопоставлений путей. Мы просто рассмотрим базовый пример этого, вы можете использовать официальную документацию TypeScript здесь, чтобы узнать больше о путях.

Вариант 3. Использование псевдонима модуля

Если вы не используете ни webpack, ни TypeScript, вы все равно можете настроить псевдонимы путей с помощью модуля / библиотеки псевдонима модуля. Выполните следующую команду в зависимости от вашего диспетчера пакетов.

yarn add module-alias

OR

npm install module-alias

Добавьте это в файл package.json и настройте псевдонимы по своему усмотрению.

И последнее, что нужно сделать. Добавьте это в точку входа вашего приложения, например index.js. Это требует и регистрирует ваши псевдонимы.

Замечательно, теперь вы можете импортировать файлы под своим псевдонимом. 🎉

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

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