ReactJS: Избавляемся от относительных путей

Недавно я увлекся разработкой Webpack-конфигов для своих проектов. До этого использовал готовые решения, типа CRA или из других бойлеров. В процессе изучения, наткнулся на очень интересное свойство, как — resolve.alias. Хотел бы коротко рассказать, почему эту штуку стоит использовать в своих конфигах.

Мне лень писать длинную статью о самых элементарных вещах, как и вам лень читать много лишней информации.

Что это такое?

Алиас (с англ. Alias - псевдоним) — Позволяет указывать псевдонимы, которые могут быть использованы в ваших проектах.

Зачем это надо?

Псевдоним использовать необязательно, но желательно. Когда вы импортируете (import) какой-то компонент из вашего проекта и он находится в какой-нибудь «чёрной дыре», откуда получить доступ к корневому файлу, подобно поиску иглы в стоге сена, псевдоним избавляет вас от этого гемора.

Есть компонент Button и вам нужно импортить из корня какой-то js-файл, который лежит в папке src/utils/upload.js.

Без псевдонима:

1import upload from '../../../utils/upload';
2

С настроенным псевдонимом:

1import upload from 'utils/upload';
2

Как настроить?

Открываем ваш конфигурации Webpack, находим примерно такой код:

1resolve: {
2    modules: ['node_modules', paths.appNodeModules].concat(
3            process.env.NODE_PATH.split(path.delimiter).filter(Boolean),
4        ),
5    ...
6

В массив modules, добавляем в начало или в конце такое значение path.resolve('./src').

В итоге должно получиться это:

1modules: ['node_modules', paths.appNodeModules, path.resolve('./src')]
2

Теперь вы можете обращаться к своим файлам начиная с корневой папки. Меняем пути в своём проекте. Перезапускаем сборку, если у вас она была ранее запущена. Готово!

Настройка конфига для Storybook

В конфигах Webpack у Storybook отсутствует resolve и вам нужно добавить такой код в module.exports:

1    resolve: {
2        extensions: ['.js', '.jsx'],
3        alias: {
4            app: path.resolve(__dirname, '../src/app')
5        }
6    }
7

Если у вас отсутствует папка app и ваше приложение в src, просто убираем /app.