Что такое относительный путь?

Относительный путь

Относительный путь — это адрес к файлу или ресурсу, который указывается относительно текущего местоположения в файловой системе или веб-проекте. В отличие от абсолютного пути, он не начинается с корневого каталога или полного адреса.

Абсолютный vs Относительный путь

Абсолютный путь (полный адрес):

/home/user/projects/myapp/src/components/Button.js
https://example.com/images/logo.png
C:\\Users\\user\\projects\\myapp\\styles.css

Относительный путь (от текущей позиции):

./components/Button.js
../styles/main.css
../../utils/helpers.js

Основные синтаксисы

Текущая директория:

./file.js          # Файл в текущей директории
./folder/file.js   # Файл в подпапке текущей директории

Родительская директория:

../file.js         # Файл в родительской директории
../../file.js      # Файл на два уровня выше

Практический пример структуры проекта

my-app/
├── src/
│   ├── components/
│   │   ├── Button.tsx
│   │   ├── Card.tsx
│   │   └── modal/
│   │       └── Modal.tsx
│   ├── pages/
│   │   └── index.tsx
│   ├── styles/
│   │   └── globals.css
│   └── utils/
│       └── helpers.ts
├── public/
│   └── images/
│       └── logo.png
└── package.json

Примеры относительных путей

Из файла Button.tsx:

// Импорт из соседней папки
import { Card } from './Card';

// Импорт из подпапки
import { Modal } from './modal/Modal';

// Импорт из родительской папки
import { helpers } from '../utils/helpers';

// Импорт из другой папки через родителя
import styles from '../styles/globals.css';

Из файла Modal.tsx (в папке modal):

// Импорт из соседней папки components
import { Button } from '../Button';

// Импорт из utils
import { helpers } from '../../utils/helpers';

// Импорт стилей
import styles from '../../styles/globals.css';

Из файла index.tsx (в папке pages):

// Импорт компонентов
import { Button } from '../components/Button';
import { Modal } from '../components/modal/Modal';

// Импорт утилит
import { helpers } from '../utils/helpers';

В HTML ссылках и атрибутах

<!-- Текущая директория -->
<img src="./images/logo.png" alt="Logo" />
<a href="./page.html">Link</a>

<!-- Родительская директория -->
<img src="../images/logo.png" alt="Logo" />
<link rel="stylesheet" href="../styles/main.css" />

<!-- Подпапка -->
<script src="./scripts/app.js"></script>

В JavaScript/TypeScript

// Динамический импорт
const module = await import('./components/Button.tsx');

// URL конструктор с относительным путем
const imageSrc = new URL('./images/logo.png', import.meta.url);

// Fetch
fetch('./api/data.json')
  .then(response => response.json())
  .then(data => console.log(data));

Особенности в веб-проектах

В браузере:

Относительные пути вычисляются относительно текущего URL страницы:

Текущая страница: https://example.com/blog/post-1/index.html

Относительный путь: ../images/image.jpg
Результирующий URL: https://example.com/blog/images/image.jpg

Относительный путь: ../../images/image.jpg
Результирующий URL: https://example.com/images/image.jpg

В Node.js:

Относительные пути вычисляются относительно текущей директории:

const fs = require('fs');

// Текущая директория
const file1 = fs.readFileSync('./data.json');

// Родительская директория
const file2 = fs.readFileSync('../config.json');

// Для абсолютного пути используйте __dirname
const absolutePath = require('path').join(__dirname, 'data.json');

Плюсы и минусы

Плюсы относительных путей:

• Код становится портативным — проект работает одинаково везде
• Легче рефакторить структуру папок
• Меньше кода в импортах

Минусы:

• Сложнее с глубокой вложенностью (много ../../../)
• Легче ошибиться при перемещении файлов
• Нужно помнить структуру проекта

Path aliases в TypeScript/Next.js

Для упрощения глубоких относительных путей используйте path aliases:

tsconfig.json:

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@components/*": ["src/components/*"],
      "@utils/*": ["src/utils/*"],
      "@styles/*": ["src/styles/*"]
    }
  }
}

Использование:

// Вместо:
import { Button } from '../../../components/Button';

// Используйте:
import { Button } from '@components/Button';