011-project-relative-imports

Импорт модулей относительно проекта, а не текущего файла

Обычный подход к импорту модуля в проекте — указание пути к нему относительно текущего файла:

import smoosh from '../../../utils/flatten';

Этот подход хрупкий и неудобный:

• сложно найти все импорты какого-либо модуля, потому что они выглядят по-разному в зависимости от местоположения;
• перенос файла с импортом в другую директорию уровнем выше или ниже ломает все импорты в этом файле;
• импорты вида ../../../module сложны для чтения и понимания, разработчику приходится мысленно резолвить путь до модуля, чтобы понять, где он лежит.

Эти проблемы решаются использованием путей относительно корня проекта, например:

import smoosh from '~/utils/flatten';

Здесь ~ — это алиас корня проекта (например, /Users/andrew-r/work/personal-site/source). Недостаток такого подхода заключается в том, что он не работает из коробки. Чаще всего этот подход используют с Вебпаком, в конфигурации которого можно указать нужные алиасы:

const path = require('path');

module.exports = {
  entry: './source/index.js',
  /* ... */
  resolve: {
    alias: {
      '~': path.resolve(__dirname, './source'),
    }
  }
};

Если вы не используете Вебпак, есть альтернатива в виде переменной окружения NODE_PATH. Она говорит ноде о дополнительных директориях, в которых нужно искать модули при импортах. Можно прописать в NODE_PATH путь к директории с исходниками проекта, тогда импорты будут такого вида:

import smoosh from 'utils/flatten';

В таком случае импорты получаются короче, но повышается вероятность конфликта имён между директориями проекта и установленными NPM-пакетами.