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

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

Дата: 05.04.2018 в 10:46, Категория: ReactJS
  • 404
  • 3
ReactJS: Избавляемся от относительных путей

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

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

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

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

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

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

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

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

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

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

import upload from 'utils/upload';

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

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

resolve: {
    modules: ['node_modules', paths.appNodeModules].concat(
            process.env.NODE_PATH.split(path.delimiter).filter(Boolean),
        ),
    ...

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

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

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

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

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

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

    resolve: {
        extensions: ['.js', '.jsx'],
        alias: {
            app: path.resolve(__dirname, '../src/app')
        }
    }

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