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.resolve(__dirname, p)

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

React-scripts eject

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

npm run eject

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

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

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

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

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

{
  "compilerOptions": {
    // ...
    "baseUrl": "src",
    "paths": {
      "@components/*": ["components/*"],
      "@styled/*": ["components/styled/*"],
      "@pages/*": ["components/pages/*"],
      "@assets/*": ["assets/*"],
      "@services/*": ["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 removeWildcardPart = p => p.replace('/*', '');
// converts "src/components/*" to "src/components"

// ...

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, alias) => {
                    obj[removeWildcardPart(alias)] = 
                      options.paths[alias].map(removeWildcardPart)[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, alias) => {
                    obj[`^${removeWildcardPart(alias)}(.*)$`] = 
                      options.paths[alias]
                      	.map(p => `<rootDir>/src/${removeWildcardPart(p)}/$1`)
                    return obj
                }, {}
            )
        )
}

// ...

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

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