Мы привыкли импортировать такие файлы ../../../Components/Dashboard/Profile, и долгое время это было довольно стандартным. Но управлять всем этим ../ - довольно сложная работа. Скажем, я хочу изменить расположение файла или папки. Ждать. Я должен это сделать? Ничего не сломает? Эти вопросы внезапно поражают нас.
На помощь приходит Absolute Imports. Теперь мы можем импортировать файлы в этой формеComponents/Dashboard/Profile, не беспокоясь о ../, и нас не заботит взаимное расположение двух файлов. Нас интересует только позиция файла относительно корня проекта. Это значительно упрощает работу по импорту. Посмотрим, как именно это сделать.

Абсолютный импорт

Absolute Import был запущен в create react app v3. Если вы все еще не уверены, давайте рассмотрим несколько преимуществ, которые имеют абсолютное значение, иначе пропустите эту часть.

Преимущества

  • Не нужно возиться с ../../../. Позаботьтесь только о своем коде 😃 (Эта задача уже не работает)
  • Вы можете напрямую копировать / вставлять код из компонента и использовать его в любом другом месте, не внося никаких изменений в импорт.
  • Вы можете легко найти импортированный файл или компонент благодаря абсолютному позиционированию.
  • Делает код чище.
  • Облегчает написание кода.

Этого списка более чем достаточно для адаптации абсолютного импорта 😛

Начать

Согласно Документам create-react-app, мы можем использовать абсолютный импорт в нашем проекте React, настроив файл jsconfig.json / tsconfig.json (для проектов машинописного текста) в корне нашего проекта. Если вы используете TypeScript в своем проекте, у вас уже будет файл tsconfig.json.

Если вы работаете в JS, добавьте jsconfig.json файл в корень вашего проекта со следующим содержанием:

Если вы используете TypeScript, у вас уже будет tsconfig.json файл в корне вашего проекта. Вы можете настроить параметр baseUrl внутри compilerOptions файла tsconfig.json вашего проекта, чтобы начать работу с абсолютным импортом. Содержимое файла будет выглядеть так:

В приведенном выше файле я только что добавил параметр baseUrl со значением src в моем compilerOptions. Ничего другого не было изменено по сравнению с исходным сгенерированным tsconfig.json.

Преобразование относительного импорта в абсолютный импорт

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

Это файл без абсолютного импорта

Нам просто нужно исключить ../../../ из импорта. Теперь файл выглядит как

🔥 Готово. Мы успешно настроили и использовали абсолютный импорт в нашем приложении React.

Теперь, когда мы настроили наш проект для поддержки абсолютного импорта, мы можем импортировать модуль, расположенный по адресу src/components/Button.js, например:

import Button from 'components/Button';

На этом заканчиваются документы create-response-app. Но есть еще кое-что, что нужно сделать.

Мы настроили наше приложение React для использования абсолютного импорта. Но нам также нужно настроить наш редактор кода для этого.

Настройка в WebStorm

WebStorm предполагает, что абсолютные пути находятся в node_modules (в соответствии с правилами Node.js), поэтому мы должны сказать ему, что мы делаем все возможное и используем абсолютный импорт.

Right-click папку src, выберите Mark Directory as и щелкните Resource Root.

  • Затем выберите Настройки - ›Редактор -› Стиль кода - ›JavaScript -› Импорт и установите флажок Использовать пути относительно корня проекта, ресурса или источника, а затем нажмите Apply.

Код VS

В VS Code вносить изменения не нужно. Он автоматически импортирует конфигурацию из файла jsconfig.json / tsconfig.json.

ESLint

CRA имеет очень минимальный набор правил в своей настройке ESLint и некоторые твердые мнения о том, почему это так. Обычно мы используем что-то вроде конфигурации ESLint от Airbnb для установки ESLint.

Если вы это сделаете, вы скоро узнаете, что Airbnb использует eslint-plugin-import, который проверяет неопределенный импорт и выдает следующие ошибки:

Вы можете исправить это с помощью атрибута settings в конфигурации ESLint, чтобы сообщить ему, что ваши пути могут быть относительно src:

Обратите внимание, что для этого не нужно устанавливать какой-либо пакет npm, достаточно settings чанка.

Для Typescript вы должны использовать настройку расширений, как указано выше, чтобы разрешить импорт в Ts.

Действительно ли это того стоит

Абсолютный импорт делает компонент более читаемым и чистым. Бывают случаи, как очень тесно связанные компоненты, когда относительный импорт имеет больше смысла, а абсолютный импорт может быть излишним. Но в целом плюсы, которые предлагает абсолютный импорт, превосходят минусы. Таким образом, переход к абсолютному импорту может стоить того.

Вывод

Надеюсь, вы нашли это полезным. Спасибо за чтение.

Если вы нашли этот блог полезным, можете Купи мне кофе ☕️ 😃