Сокращенный импорт для *.tsx и *.jsx, нужно ли добавлять алиасы и в конфиг вебпака и в tsconfig?

Question

[Nikolay Matyushkin]

Всем привет! Итак...
Есть у меня папка с модулями. У каждого модуля есть свои папки с компонентами, редьюсерами, экшенами, типами, фикстурами и т.д.
Эта папка с модулями периодически пополняется.
Я решил упростить импорт внутри директорий этих модулей.
Т.е.
Например имеем такую структуру папок:
---| src
------| modules
--------| about
--------| menu
--------| contacts
--------| orderSuccess

Мне нужно, чтобы например в папке about вместо импорта "../../../../components/footer/footer" был импорт "@about/components/footer/footer". Окей. Поскольку папка постоянно дополняется новыми модулями, я решил автоматизировать процесс добавления новых алиасов.
Я написал метод, который считывает директорию по указанному пути (fs.readdirSync), отдаёт массив всех файлов и папок в этой директории и после этого я формирую объект алиасов и спредом разворачиваю в объекте resolve.alias в webpack.config. Всё работает, всё ок. НО.

В проекте есть typescript. Судя по тому, что я вычитал, для typescript (как и для jest) нужно так же добавлять алиасы. Всё норм, но здесь мой метод уже не в кассу ибо tsconfig - это json. А дописывать каждый раз ручками не очень хочется

Подскажите плз мб существует универсальное решение, при котором алиасы мы пишем в 1 месте и на это место будут ссылаться и webpack и typescript?
Если есть, то какое? Если нет, то можно ли как-то воспользоваться моим методом для конфигурации typescript?

Comments

[WbICHA]

Вот как раз прописывать алиасы вебпаку явно не имеет смысла, поскольку тс может сам резолвить свои алиасы при транспилировании. (ttypescript + typescript-transform-paths)
Что же касается джеста, то я так и не смог подружить его с алиасами из тсконфига. Уже не помню почему, но, теоретически, это возможно.
В любом случае тс-конфиг ─ это центральная фигура.

Answer 1

[Дмитрий Беляев]

tsconfig.json

{
    "compilerOptions": {
        "baseUrl": "./",
        "paths": {
            "@*": ["./src/modules/*"]
        }
    }
}

остальные параметры по своему вкусу

с webpack боюсь придется для каждой папки генерировать свой алиас, но учитывая что конфиг webpack - это код, не большая проблема, а за основу для генерации он может брать tsconfig.json

Comments

[Nikolay Matyushkin]

Спасибо за фидбек, мне помог ваш совет!