Если вы работаете над большим одностраничным приложением, скорее всего, у вас есть глубоко вложенная иерархия папок (глубина ›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" } }
Вот и все. А теперь вперед и избавьтесь от этих мерзких ../
!