elegantnější a uspořádanější importy – část 01
Pokud mě při vývoji aplikace s velkým množstvím souborů trápí jedna bolest, pak je to, když tyto soubory importují jiné soubory, což způsobuje přebytek ../
v importech těchto souborů.
Je běžné vidět, že jak naše aplikace roste, složky našich projektových souborů se stále více vnořují do jiných složek, a když to nejméně čekáme, narazíme na následující příklad importu:
import ExampleComponent from '../../../../../../src/components/ExampleComponent/'
Výše uvedený příklad je skutečný a je mnohem běžnější, než si myslíme. Bohužel nadměrné používání těchto ../
přináší určité potíže, když potřebujeme udržovat náš kód, mimo jiné přepracování opravy relativní cesty pokaždé, když potřebujeme změnit umístění importovaného souboru nebo importovaného souboru.
Jedním z nejjednodušších způsobů, jak učinit tento import elegantnějším a organizovanějším, je vytvořit vlastní cestu a ponechat ji jako absolutní. Výše uvedený příklad by tedy mohl vypadat takto:
import ExampleComponent from '~/components/ExampleComponent/'
Ve výše uvedeném příkladu předpona ~
byl nakonfigurován jako absolutní cesta k adresáři našeho projektu, v tomto případě je adresář složka src
. Tímto způsobem nezáleží na tom, ve které složce je náš soubor, když použijeme předponu ~/
, budeme vždy importovat absolutní cestu ke složce src
.
Docela šílené, že?!
Uskutečnění
Instalace požadovaných závislostí
Nejprve budeme muset nainstalovat a nakonfigurovat tři závislosti, aby toto kouzlo fungovalo. A jsou to:
respond-app-rewired a custom-cra
V kořenovém adresáři našeho projektu spusťte níže uvedený příkaz k přizpůsobení nastavení webpacku, aniž byste museli používat eject
a bez nutnosti forkovat reakční skripty.
yarn add -D react-app-rewired customize-cra
babel-plugin-root-import
Nyní spusťte níže uvedený příkaz k importu souborů pomocí vlastních cest.
yarn add -D babel-plugin-root-import
Vytváření 'config-overrides.js'
Také v kořenovém adresáři našeho projektu vytvoříme soubor s názvem config-overrides.js
. Bude zodpovědný za vytvoření kořenové složky našeho projektu.
Vložíme tento kód do souboru:
const { addBabelPlugin, override } = require('customize-cra')
module.exports = override(
addBabelPlugin([
'babel-plugin-root-import',
{
rootPathSuffix: 'src',
},
])
)
Usnadnění života dev editor
Stále v kořenovém adresáři našeho projektu vytvoříme soubor s názvem jsconfig.json
. Bude zodpovědný za to, aby VSCODE porozuměl vlastním cestám.
Vložíme tento kód do souboru:
{
"compilerOptions": {
"baseUrl": "src",
"paths": {
"~/*": ["*"]
}
}
}
Nejnovější podrobnosti
Nakonec provedeme aktualizaci skriptů v souboru package.json
. Nechte je takto:
{
"scripts": {
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test",
"eject": "react-scripts eject"
}
}
Jak můžete vidět, nahrazujeme všech react-scripts
skriptů podle react-app-rewired
, s výjimkou skriptu eject .
Vše nastaveno!
Nyní můžeme použít jakýkoli soubor v naší složce src
pomocí ~/
v době dovozu.
import ExampleComponent from '~/components/ExampleComponent/'
A...
Pokud chcete vidět tento příklad v akci, můžete se podívat na šablonu, kterou jsem vytvořil pro projekty React zde:
Tam jsem také nastavil ESLint a další věci pro usnadnění počáteční struktury vašeho projektu.
Napište tam, co si myslíte o tomto přístupu v našich importech :)