Erstellen von Pfadaliasnamen in React js

(13. September 2020)

In diesem Lernprogramm werden Sie zum Erstellen von Pfadaliasnamen für Ihr Reaktionsprojekt geführt. Durch das Erstellen von Pfadaliasnamen für Assets oder Komponenten wird der Code sauberer und hübscher. Schauen Sie sich beispielsweise das folgende Bild vor und nach dem Bild an.

Vor
Nach

Sieht es nicht sauberer aus? Dies passt hervorragend, wenn Ihr Projekt groß ist und Sie viele, viele Dateien und Komponenten in Ihre Datei importieren müssen. Beginnen wir also damit, wie Sie Pfad-Aliase in React Js erstellen.

Anforderungen

ol>

  • Öffnen Sie das Terminal in Ihrem Projektstammverzeichnis und installieren Sie die reaktionsverdrahtete und React-App-Rewire-Alias ​​ als Entwicklungsabhängigkeit.
  • npm install react-app-rewired react-app-rewire-alias --save-dev

    2. Erstellen Sie nun im Stammverzeichnis eine Datei mit dem Namen config-overrides.js und fügen Sie den folgenden Code ein.

    Hier importieren wir zuerst {alias} von React-App-Rewire-Alias. Danach fügen wir ein Objekt mit Schlüssel-Wert-Paaren innerhalb des Alias ​​ wobei der Schlüssel Ihre Pfaddefinition und der Wert der Pfad ist. Sie können mehrere Schlüssel-Wert-Paare für unterschiedliche Definitionen und Pfade hinzufügen.

    3. Öffnen Sie nun Ihre Datei package.json und „spiegeln“ Sie die vorhandenen Aufrufe von react-scripts bis react-app-rewired

    4. Jetzt können Sie Ihre neuen Aliase in Ihrem React js-Projekt verwenden.

    5. Starten Sie Ihr Projekt npm start, um zu überprüfen, ob es funktioniert oder nicht.

    Unten finden Sie das Github-Repository als Referenz.

    Mediumtutorial/path-aliases-react-medium

    Dieses Projekt wurde mit der Create React App gebootet. Im Projektverzeichnis können Sie Folgendes ausführen: Führt die App unter…

    github.com

    aus