🇺🇸 | Importujte vlastní cesty a jak vám to může pomoci

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 :)