Viele von uns denken, wenn wir nur eine Sache zum Exportieren aus einer Datei haben, sollten wir sie verwenden, export defaultund wenn es mehr als eine Sache gibt, dann verwenden Sie named exportalleine oder verwenden Sie sie mit export default.

export defaultUnd es ist völlig in Ordnung, es für kleine Projekte zu verwenden , aber wenn Sie an einem großen Projekt arbeiten oder mit einem Team an einem Projekt arbeiten, export defaultist die Verwendung möglicherweise keine gute Wahl.

Lassen Sie uns verstehen, warum?

❓ Warum wir den Exportstandard nicht verwenden sollten

Der erste Grund für die Nichtverwendung export defaultist, dass wir während der Verwendung importden Namen des exportierten Objekts ändern können. Oder anders gesagt, wir haben die Möglichkeit, einen Namen für Standardexporte zu wählen

Zum Beispiel, wenn wir einen Standardexport wie diesen haben

// helloWorld.js

export default function helloWorld() {
    console.log("Hello! World");
}

import HelloWorld from "helloWorld.js";
import HWorld from "helloWorld.js";

Wenn wir also mit einem Team arbeiten, kann das Ändern von Namen viele Probleme beim Debuggen des Codes oder beim Refactoring verursachen.

Aber um dies zu überwinden und den Code konsistent zu halten, gibt es eine Regel, dass der Name des importierten Objekts mit dem Namen der Importdatei übereinstimmen sollte. So was

import GetItem from "getItem.js";
import FindUser from "findUser.js";

Der Standardexport macht den erneuten Export etwas schwieriger

Wenn Sie nicht wissen, was eine Wiederausfuhr ist? dann, wenn wir importein Ding haben, aber anstatt es zu benutzen, verwenden wir exportes direkt, so

// first
import HelloWorld from "helloWorld.js";
export { HelloWorld };

// second
import {getUser, findUser} from "user.js"; // named export
export {getUser, findUser};

export {default as HelloWorld} from "helloWorld.js";
export {getUser, findUser} from "user.js";

• Um einen Standardexport erneut zu exportieren, müssen wir export {default as HelloWorld}. Wir können dies nicht verwenden export HelloWorld from “helloWorld.js”, dies führt zu einer Syntax Error.
• Wenn unsere Datei viele benannte Exporte und einen Standardexport enthält, können wir so etwas tun

export * from "items.js"; // to import and export all named exports    
export {default} from "item.js"; // to import and export default export

Das war's dafür

Ich hoffe, dieser Blog wird Ihnen helfen. Und Sie werden auch anfangen, sich die Stellen anzusehen, an denen Sie es verwenden sollten export defaultund an denen Sie es nicht tun sollten.

Kommentar, Wie war dieser Blog? oder irgendein Feedback. Ich würde gerne Ihre Kommentare lesen.

Verbinden Sie sich mit mir auf Twitter

Brauche deine Hilfe!

Kürzlich habe ich ein Projekt erstellt, das ein Typeform-Klon ist. Und haben es auf Peerlist Project Spotlight gestartet.
Es wäre wirklich toll, wenn Sie mein Projekt positiv bewerten könnten.

Projekt: Forming Typeform

Danke vielmals!