javascript & react: import относительно root, а не текущего элемента

Question

сейчас в проекте когда надо вызвать import вспомогательного компонента зачастую приходится использовать вот такие конструкции:

import '../../tasks/task_one'

а можно ли двигаться через корень как-нибудь, чтоб получалось наподобие

import '$tasks/task_one'

под $ я тут просто показал корень

мне кажется использование в данном случае абсолютного пути делает код более читабельным

есть ли такой функционал?

Answer 1

Можно в корень проекта добавить jsconfig.json файл со следующими настройками

{
  "compilerOptions": {
    "baseUrl": "src"
  }
}

Если у вас проект в TypeScript-е, то можно в файле tsconfig.json написать те же самые свойства и все будет работать также.

{
    "compilerOptions": {
        // .. тут другие настройки
        "baseUrl": "src"
    },
}

Без указания baseUrl результат будет таким если из App.js импортировать компонент.

import Button from "./components/Button";

А после настройки относительной пути результат будет таким

import Button from "components/Button";