Opprett sti-aliaser i React js

(13. september 2020)

Denne opplæringen vil veilede deg for å lage banealiaser for ditt reageringsprosjekt. Å lage banealiaser for eiendeler eller komponenter gjør at koden blir renere og penere. Se for eksempel på bildet foran og etter.

Before
Etter

Ser det ikke renere ut? Dette passer bra hvis prosjektet ditt er stort, og du må importere mange filer og komponenter til filen. Så la oss komme i gang med hvordan du lager banealiaser i react js.

Krav

  1. Åpne terminal i prosjektets rotkatalog og installer react-app-rewired og react-app-rewire-alias som en avhengighetsavhengighet.
npm install react-app-rewired react-app-rewire-alias --save-dev

2. Nå oppretter du en fil i rotkatalogen med navnet config-overrides.js og limer inn koden nedenfor.

Her importerer vi først {alias} fra react-app-rewire-alias. Deretter legger vi til et objekt med nøkkelverdipar i alias hvor nøkkelen er din banedefinisjon og verdien er banen. Du kan legge til flere nøkkelverdipar for forskjellige definisjoner og stier.

3. Åpne nå package.json filen og «Vend» eksisterende samtaler fra react-scripts til react-app-rewired

4. Nå kan du bruke de nye aliasene i React js-prosjektet.

5. Start prosjektet npm start for å sjekke om det fungerer eller ikke.

Nedenfor er Github-depotet som referanse.

Mediumtutorial/path-aliases-react-medium

Dette prosjektet ble bootstrapped med Create React App. I prosjektkatalogen kan du kjøre: Kjører appen i …

github.com