Разница между относительными и неотносительными импортами модулей

Когда вы работаете с JavaScript или TypeScript, вы очень часто сталкиваетесь с импортированием модулей. Модули позволяют разделять код на более мелкие и управляемые части. Однако есть два основных типа импортов: относительные и неотносительные. Давайте разберем каждый из них подробнее.

Относительные импорты

Относительные импорты позволяют импортировать модули в зависимости от их местоположения относительно текущего файла. Используются специальные символы ./ и ../ для указания пути.

• ./ указывает на то, что модуль находится в той же директории, что и текущий файл.
• ../ указывает на то, что модуль находится на один уровень выше по иерархии директорий.

Пример относительного импорта:

Предположим, у нас есть структура директорий:

src/
├── index.ts
└── utils/
    └── math.ts

Импорт модуля math.ts в index.ts:

// index.ts
import { add } from './utils/math'; // относительный импорт

Если бы мы захотели импортировать модуль из одного уровня выше по иерархии, наш код выглядел бы так:

// src/utils/another-utils.ts
import { multiply } from '../utils/math'; // относительный импорт

Неотносительные импорты

Неотносительные импорты, также известные как "псевдонимы", используют пути, которые не зависят от текущего местоположения файла. Эти импорты позволяют создавать более чистый и удобочитаемый код.

Для использования неотносительных импортов необходимо настроить ваш проект, например, с помощью TypeScript или модульного сборщика, такого как Webpack, чтобы он знал, где искать ваши модули.

Пример неотносительного импорта:

Если в нашей конфигурации tsconfig.json настроены пути, мы можем использовать неотносительные импорты:

// tsconfig.json
{
  "compilerOptions": {
    "baseUrl": "./src",
    "paths": {
      "*": ["*"]
    }
  }
}

Теперь мы можем импортировать math.ts следующим образом:

// index.ts
import { add } from 'utils/math'; // неотносительный импорт

Итог

• Относительные импорты: Зависимы от местоположения файла. Их легко использовать для импортирования модулей в пределах проекта, но они могут быстро усложняться при глубоком вложении директорий.
• Неотносительные импорты: Они делают код более читабельным и простым в управлении при работе с крупными проектами, но требуют предварительной настройки проекта.

Надеюсь, теперь вам стало понятнее, когда и как использовать относительные и неотносительные импорты модулей в JavaScript и TypeScript!