Skapa vägalias i React js

(13 september 2020)

Denna handledning hjälper dig att skapa sökalias för ditt reagera projekt. Att skapa sökalias för tillgångar eller komponenter gör att koden blir renare och snyggare. Titta till exempel nedan före och efter bilden.

Före
Efter

Ser det inte renare ut? Detta passar bra om ditt projekt är stort och du behöver importera massor av filer och komponenter till din fil. Så låt oss komma igång med hur man skapar banalias i react js.

Krav

  1. Öppna terminal i din projektkatalog och installera react-app-rewired och reagera-app-rewire-alias som ett devberoende.
npm install react-app-rewired react-app-rewire-alias --save-dev

2. Skapa nu en fil med rotnamnet config-overrides.js och klistra in koden nedan.

Här importerar vi först {alias} från react-app-rewire-alias. Därefter lägger vi till ett objekt med nyckel-värdepar inuti alias där nyckeln är din vägdefinition och värdet är sökvägen. Du kan lägga till flera nyckel-värdepar för olika definitioner och sökvägar.

3. Öppna nu din package.json -fil och ”Vänd” de befintliga samtalen från react-scripts till react-app-rewired

4. Nu kan du använda dina nya alias i ditt React js-projekt.

5. Starta ditt projekt npm start för att kontrollera om det fungerar eller inte.

Nedan finns Github-förvaret som referens.

Mediumtutorial/path-aliases-react-medium

Detta projekt startades av med Create React App. I projektkatalogen kan du köra: Kör appen i …

github.com