(Первоначально опубликовано на BoobOrGuru)

Я не могу поверить, что мне потребовалось так много времени, чтобы понять, как иметь чистые пути импорта при использовании модулей AMD или ES6 в Javascript. Я об этом:

var Bar = require('../../foo/Bar');
// or
import Bar from '../../foo/Bar';

Как весело смотреть на структуру папок и просто добавлять ../, пока вы, наконец, не начнете переходить к интересующему вас файлу. Это так нечисто, а Solutions Majisti все о чистом коде! К счастью (и немного к сожалению), Webpack может решить эту проблему. Webpack добавит шаг в рабочий процесс вашего проекта, но, честно говоря, он достаточно хорош, чтобы использовать его, даже в нативном проекте только для JS, по-прежнему кажется, что преимущества перевешивают недостатки.

разрешение .root

Эта небольшая конфигурация позволит вам иметь более чистые пути импорта (или требования). Это тоже довольно просто.

module.exports = {
    resolve: {
        extensions: ['', '.js', '.jsx', '.json'],
        root: [
            path.join(root, 'src/js'),
            path.join(root, 'tests')
        ]
    }
};

С этого момента вы можете var Bar = require('foo/Bar'); и если у вас есть tests/foo/Bar.js или src /js/foo/Bar.js, Webpack решит эту проблему. Конечно, это означает, что вам нужно быть осторожным с вашими соглашениями об именах, но это то, что вы уже должны сделать.

В качестве бонуса обратите внимание, что я добавил расширения с массивом расширений. Это позволяет нам импортировать файл без добавления расширения к импорту. Не забудьте добавить пустую строку! Установка этого параметра переопределяет способ разрешения модулей Webpack по умолчанию, что нарушит импорт node_modules. Вы можете прочитать больше здесь".

Поддержка IDE

Должен признаться, я не работал с кучей IDE, Intellij IDEA — основная, и она плохо поддерживает Webpack, если вообще поддерживает. Вам придется вручную изменить пути импорта при рефакторинге, и Ctrl + Click не сработает. При этом рефакторинг в Javascript в любом случае не так хорош, так что здесь вы ничего не теряете.

Насколько мне известно, другие IDE тоже его не поддерживают, но тут я вполне могу ошибаться. Дайте мне знать в комментариях, и я обновлю это.

Напутствие

Я понимаю, что это очень просто, но я не видел, чтобы это обсуждалось, когда люди говорят об использовании модулей JS или ES6, и еще меньше людей просто пишут об этом. В сочетании с тем фактом, что документация Webpack… не идеальна (она такая тесная и странно разделена), я подумал, что этот краткий пост может быть полезен людям вроде меня, которые еще не знали об этой функции Webpack.