../../.. => Abszolút importok

2021-10-10

Ebben a cikkben megmutatom, hogy:

Miért javaslom az abszolút importok használatát?
Hogyan lehet abszolút importokat használni?

Miért?

src/components/Navigation/Navigation.js

import { useScroll } from "../../hooks/useScroll";
import { isTextWrapped } from "../../utils/NavigationUtils";
import { useResize } from "../../hooks/useResize";
import { getLayout } from "./utils/helpers";
import * as RootConfigs from "../../config/root";

Aki fejlesztett már React-ben nagy eséllyel találkozott már hasonlóval. Így sajnos:

nehéz kitalálni, hogy melyik fájl pontosan hol található.
Ha kiemelek egy részt egy másik komponensbe egy másik fájlba, akkor kutathatok, hogy hogyan írjam át a relatív importokat

Az abszolút importok használatával el lehet kerülni a fenti problémákat...

src/components/Navigation/Navigation.js

import { useScroll } from "hooks/useScroll";
import { isTextWrapped } from "utils/NavigationUtils";
import { useResize } from "hooks/useResize";
import { getLayout } from "components/Navigation/utils/helpers";
import * as RootConfigs from "config/root";

...és sokkal szebb is ;)

Hogyan?

A jsconfig.json (TypeScript esetén tsconfig.json) fájlban be lehet állítani, hogy hol keresse a forrásokat:

{
  "compilerOptions": {
    "baseUrl": "./src"
  }
}

Ennek a beállítása után abszolút url-eket is tudsz használni a projektben. Szívesen! :)

A Relatív url-ek továbbra is működni fognak, így egy fokozatos átállás sem lehet probléma.

Élő projektben átállás - Minden fájlban át kell írni?

Hogy ne kelljen egyesével minden egyes importot átírni, csináltam egy scriptet, ami:

Beállítja, a jsconfig.json / tsconfig.json fájlodat
- Ha nincs jsconfig.json csinál egyet (Ha TypeScript projekt, valószínűleg van már egy tsconfig.json)
A megadott projektben az src folderben rekurzívan végigmegy és minden js/jsx/ts/tsx kiterjesztésű fájlban átírja az importokat abszolútra.

$ node convertImports2AbsolutePaths.js <projekt főkönyvtára>

A scriptet itt éred el