Όσο περισσότερο δουλεύω στο React, τόσο περισσότερο μου αρέσει. Είναι ένα πολύ ώριμο πλαίσιο που είναι εξαιρετικά δημοφιλές. Ενώ δούλευα με το VueCLI, υπήρχε ένα πράγμα που μου άρεσε πραγματικά. προεπιλεγμένο ψευδώνυμο για τον κατάλογο src. Έχοντας ένα ψευδώνυμο για έναν κατάλογο που αναφέρεται συνήθως εξαλείφει τις εύθραυστες σχετικές διαδρομές, παράγει καθαρότερο κώδικα και είναι πολύ πιο εύκολο να διαβαστεί. Ας βουτήξουμε.

Εισαγωγή πακέτων χωρίς ψευδώνυμο

Ας δούμε πόσο ακατάστατη είναι η εισαγωγή κώδικα χωρίς ψευδώνυμο. Ας φανταστούμε ότι το στοιχείο μας (SomeComponent.jsx) είναι ένθετο βαθιά μέσα στη δομή του καταλόγου μας. Θέλω να έχω πρόσβαση στο AnotherComponent.jsx που είναι μερικά επίπεδα πάνω…

import React, { Component } from 'react';
import AnotherComponent from './../../../../../components/anotherComponent/AnotherComponent';
import ProfileImage from './../../../../../../assets/profile.jpg';

class SomeComponent extends Component {
  render() {
    return (
      <div>
      	<img src={ProfileImage} alt="My profile image!" />
        <AnotherComponent />
      </div>
    );
  }
}

export default SomeComponent;

Όπως μπορείτε να δείτε, τα σχετικά μονοπάτια είναι άσχημα. Αλλά είναι επίσης εύθραυστα. Τι γίνεται αν ενημερώσετε τη δομή του καταλόγου σας; Η φυσική μετακίνηση ενός συστατικού σε ένα επίπεδο με όλες τις εξαρτήσεις του, θα σπάσει και θα έχει μπουμ. Αποτυχία μεταγλώττισης…

Εισαγωγή πακέτων με ψευδώνυμο

Ας δούμε τα πακέτα με ψευδώνυμο. Αυτός είναι ο τελικός στόχος.

import React, { Component } from 'react';
import AnotherComponent from '@/components/anotherComponent/AnotherComponent';
import ProfileImage from '@/assets/profile.jpg';

class SomeComponent extends Component {
  render() {
    return (
      <div>
      	<img src={ProfileImage} alt="My profile image!" />
        <AnotherComponent />
      </div>
    );
  }
}

export default SomeComponent;

Βλέπετε, δεν είναι πολύ καλύτερο; Ο κώδικάς μας είναι πιο καθαρός και αφού χρησιμοποιούμε απόλυτες διαδρομές, ο κώδικάς μας δεν είναι τόσο εύθραυστος!

Αυτό είναι φοβερό, αλλά πώς μπορώ να το κάνω αυτό;

Πρώτον, υποθέτω ότι χρησιμοποιείτε το Creative-react-app, το CLI του React. Δεύτερον, θα χρειαστεί να ανοίξετε το αρχείο config/webpack.config.dev.js.

Μόλις ανοίξει…

  1. Εκτέλεση: npm εκτέλεσης εξαγωγή
  2. Βρείτε το αντικείμενο «ψευδώνυμο» στο αρχείο διαμόρφωσης προγραμματιστή
  3. Προσθέστε τον παρακάτω κώδικα…
  4. '@': path.resolve('src')

Το αντικείμενο ψευδώνυμού σας θα πρέπει να μοιάζει κάπως έτσι…

alias: { '@': path.resolve('src'), 'react-native': 'react-native-web' }

Μου αρέσει επίσης να προσθέτω ψευδώνυμα σε ορισμένα κοινά χρησιμοποιούμενα node_modules επίσης. Για τα έργα μου, συνήθως δημιουργώ ένα ψευδώνυμο για το Bulma, το πλαίσιο Flexbox CSS. Σημείωση: το ψευδώνυμό σας δεν χρειάζεται να ξεκινά με ή με "@". μπορεί ό,τι θέλεις.

'bulma': path.resolve('node_modules/bulma/css/bulma.css')

Έτσι, στα στοιχεία μου, μπορώ απλώς να το εισαγάγω όπως οποιοδήποτε άλλο πακέτο, φύλλο στυλ, εικόνα ή στοιχείο.

import Bulma from 'bulma';

Αν αυτό σας βοήθησε καθόλου, κοινοποιήστε και ακολουθήστε με στο Twitter!

Δημοσιεύτηκε αρχικά στο daveberning.io στις 29 Δεκεμβρίου 2017.