Если вы работаете над большим одностраничным приложением, скорее всего, у вас есть глубоко вложенная иерархия папок (глубина ›2), благодаря которой большинство ваших import операторов выглядят как изображение слева. И это явно не идеально по нескольким причинам, в том числе:

  • Писать неудобно (методом проб и ошибок выяснить, насколько далеко нужно зайти с помощью точки-точки-косой черты).
  • Необходимость печатать ../ снова и снова и снова может действовать вам на нервы и расстраивать вас. Это не очень хорошо для вашей продуктивности (или характера).
  • Сложно читать. Все эти точки и косые черты просто добавляют шума в код. Вы не можете определить, сколько уровней вы поднимаетесь, с первого взгляда.
  • Реорганизовать рефакторинг - действительно большая проблема. Возможно, вам придется исправить около дюжины import во всей кучке файлов. Сама мысль о том, что нужно исправить все эти точки-точки-косые черты, может убедить вас полностью отказаться от идеи рефакторинга.

К счастью, есть достаточно простое решение, чтобы избежать этого: Используйте абсолютный импорт!

Если вы используете create-react-app, все, что вам нужно сделать, это добавить файл с именем .env в корень проекта со следующим содержимым:

NODE_PATH=src/

Вот и все! Теперь вы можете написать свои import следующим образом:

import { provideUser } from "auth/wrappers";
import * as util from "shared/util";
import RadioButton from "shared/components/RadioButton";
import { setLoader } from "app/actions/LoaderActions";
import { OptionsContainer } from "shared/containers/";
import JobDescription from "../components/JobDescription";

Каждый раз, когда вам нужно полностью перейти к src/, вы можете пропустить ../ и сразу начать с имени папки. Вы по-прежнему можете использовать относительный импорт там, где это имеет смысл (см. Последний импорт выше).

Если вы используете Visual Studio Code и хотите, чтобы автозавершение кода и другие полезности Intellisense работали с абсолютным импортом, просто создайте файл с именем jsconfig.json со следующим содержимым:

{
  "compilerOptions": {
    "baseUrl": "src"
  }
}

Вот и все. А теперь вперед и избавьтесь от этих мерзких ../!