Сделайте импорт более читабельным. Решения JS/TS и ESLint.

Многие проблемы встречаются в масштабах проекта. Одним из наиболее важных является обеспечение ремонтопригодности кода. Глубина импорта увеличивается по мере роста кодовой базы. Они становятся очень грязными.

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

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

В файловой системе в стиле Unix точка «.» относится к текущему каталогу, двойная точка «..» относится к каталогу на уровень выше. По умолчанию, если нам нужно что-то импортировать из каталога верхнего уровня, нам нужно записать это как относительный путь. Например, из текущего каталога нам нужно перейти на 3 уровня вверх и найти здесь конкретный файл: «../../../service/{filename}».

Но что, если я скажу, что на самом деле мы можем записать импорт как неотносительные пути, такие как «приложение/сервис/{имя файла}».

Первое решение — сопоставление путей с помощью компиляторов JS/TS.

Мой друг заметил ту же проблему с грязным импортом и вспомнил «псевдонимы для импорта», но у него возникли некоторые трудности.

Итак, давайте попробуем украсить наш импорт первым решением.

Компиляторы JavaScript и TypeScript разрешают наш относительный импорт, но мы можем изменить конфигурацию, чтобы разрешить и неотносительный импорт. Поэтому нам просто нужно добавить директивы «baseUrl» и «paths» в файл jsconfig.json или tsconfig.json.

Параметр «baseUrl» сообщает компилятору, где искать модули. Предполагается, что все импорты модулей с не относительными именами относятся к «baseUrl».

А через «пути» мы настраиваем компилятор на использование конфигурации сопоставления для сопоставления имен модулей с файлами во время выполнения.

Представьте, что у нас есть такая файловая структура:

Таким образом, мы можем применить такую конфигурацию:

{
   "compilerOptions": {
      "baseUrl": ".",
      "paths": {
         "@features*": [
            "./features/*"
         ],
         "@core*": [
            "./core/*"
         ],
         "@auth*": [
            "./auth/*"
         ],
         "@store*": [
            "./store/*"
         ],
      },
  }
}

Обратите внимание, что «пути» разрешаются относительно «baseUrl».

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

Если вы заметили, мы по-прежнему можем использовать как относительные пути, так и не относительные.

Лично я предпочитаю использовать неотносительные пути для глубокого импорта в другие логические части проекта и использовать относительные пути для импорта 1-2 уровня в текущей логической части.

Хорошо выглядеть! Но мы должны настроить его вручную. И следующее решение будет работать автоматически. Так что прокомментируйте свою директиву «пути» и двигайтесь вперед!

Второе решение — преобразователь импорта ESLint

ESLint — супермощный инструмент! И у него также есть плагин для анализа синтаксиса импорта/экспорта. И есть также преобразователь импорта, который может помочь нам обновить наш импорт.

Нам нужно установить eslint и импортировать плагин:

yarn add --dev eslint eslint-plugin-import

И добавьте эту конфигурацию в файл конфигурации ESLint:

{
  "settings": {
      "import/resolver": {
         "typescript": {
            "project": "./tsconfig.json"
         },
         "node": {
            "paths": [ "." ]
         }
      }
   }
}

И это все!

После этого мы автоматически разрешаем не относительный импорт!

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

Я прогрессивный инженер-программист с более чем 5-летним опытом разработки, и я люблю делиться им! Так что следуйте за мной и следите за обновлениями!

Входящие темы:

WebAssembly (Wasm): когда и как использовать
Генерация кода клиентского API, от спецификаций OpenAPI до TypeScript
Получение кадров из видеофайлов на фронтенде

Использованная литература:

Сделайте импорт более читабельным. Решения JS/TS и ESLint.