Path aliases in React

Этот материал поможет настроить path aliases для вашего cretae-react-app.

Введение

Давайте начнем с того, зачем вообще это необходимо.

По мере роста количества компонентов и различных сервисов в вашем проекте, все чаще начинают появляться такие импорты:

Хочется заменить эти пути на что-то подобное:

Ниже я привел 2 варианта решения данной проблемы.

Import craco

Самый простой способ - это воспользоваться craco. Установив пакет и заменив скрипты, как написано в документации, вы можете приступить к созданию path aliases в файле craco.config.js.

const path = require('path');

const resolvePath = p => path.join(path.resolve(__dirname, p))

module.exports = {
    // ...
    webpack: {
        alias: {
            '@components': resolvePath('./src/components'),
            '@assets': resolvePath('./src/assets'),
            '@services': resolvePath('./src/services')
        }
    },
  // ...
}

React-scripts eject

В этом методе я хочу сам поправить конфигурационные файлы, а для этого мне нужен к ним доступ. Но, будьте аккуратны, ведь действия этого скрипта НЕОТВРАТИМЫ!

npm react-scripts eject

После выполнения скрипта у вас появятся такие директории и файлы как :

• Директория config/

• Директория scripts/

• Файл tsconfig.json (или jsconfig.json)

Изначально нужно добавить наши path aliases в tsconfig.json (или jsconfig.json). Для того, чтоб при сборке наши скрипты в директории config/ подтянули их для webpack и для jest.

{
  "compilerOptions": {
    // ...
    "baseUrl": ".",
    "paths": {
      "@components/*": ["src/components/*"],
      "@styled/*": ["src/components/styled/*"],
      "@pages/*": ["src/pages/*"],
      "@assets/*": ["src/assets/*"],
      "@services/*": ["src/services/*"]
    },
    // ...
  },
  // ...
}

Далее нужно провести небольшие изменения в файле modules.js, который обрабатывает файл исправленный ранее.

'use strict'

const fs = require('fs')
const path = require('path')
const paths = require('./paths')
const chalk = require('react-dev-utils/chalk')
const resolve = require('resolve')

const slicePath = p => p.slice(0, p.indexOf('*') - 1)

// ...

function getWebpackAliases(options = {}) {
    const baseUrl = options.baseUrl

    if (!baseUrl) {
        return {}
    }

    let resultAlias = {src: paths.appSrc}
    
    return Object.assign({}, resultAlias,
            Object.keys(options.paths).reduce(
                (obj, x) => {
                    obj[slicePath(x)] = options.paths[x].map(slicePath)[0]
                    return obj
                }, {}
            )
        )
}

// ...

function getJestAliases(options = {}) {
    const baseUrl = options.baseUrl

    if (!baseUrl) {
        return {}
    }

    let resultAlias = {'^src/(.*)$': '<rootDir>/src/$1'}
    
    return Object.assign({}, resultAlias,
            Object.keys(options.paths).reduce(
                (obj, x) => {
                    obj[`^${slicePath(x)}(.*)$`] = options.paths[x].map(x => `<rootDir>/src/${slicePath(x)}/$1`)
                    return obj
                }, {}
            )
        )
}

// ...

Теперь наш проект успешно работает с созданными нами path aliases.

Пользуйтесь на здоровье!