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

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

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

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

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

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

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'),
    },
  },
};

Документация по настройке алиасов в Вебпаке — https://webpack.js.org/configuration/resolve/#resolve-alias