Обычный подход к импорту модуля в проекте — указание пути к нему относительно текущего файла:
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'),
},
},
};