Warum und wann sollte der Standardexport gegenüber benannten Exporten in es6-Modulen verwendet werden?
Lesezeit: 7 Minuten
Ich habe alle Fragen in Stackoverflow weitergeleitet. Aber keiner der Vorschläge, warum und wann der Standardexport verwendet werden sollte.
Ich habe gerade gesehen, dass der Standardwert “Wenn es nur einen Export in einer Datei gibt” erwähnt werden kann.
Gibt es einen anderen Grund für die Verwendung des Standardexports in es6-Modulen?
Benannte Exporte sind nützlich, um mehrere Werte zu exportieren. Beim Import muss zwingend der gleiche Name des entsprechenden Objekts verwendet werden. Ein Standardexport kann jedoch mit einem beliebigen Namen importiert werden, zum Beispiel: export default k = 12; // in Datei test.js import m aus ‘./test’ // Beachten Sie, dass wir die Freiheit haben, import m anstelle von import k zu verwenden, weil k der Standardwert war export console.log(m); // wird 12 protokollieren developer.mozilla.org/en-US/docs/web/javascript/reference/…
– Ferhat BAŞ
24. Oktober 2017 um 15:07 Uhr
2ality.com/2014/09/es6-modules-final.html hat eine anständige Erklärung imho. Verwenden Sie default, wenn Sie ein ganzes Modul importieren möchten, Sie müssen die Namen der Methoden dieses Moduls nicht kennen. Verwenden Sie die benannten Exporte, um bestimmte Dinge in das Modul zu importieren.
– Schlau
24. Oktober 2017 um 15:10 Uhr
Ben
Einige Unterschiede, die dazu führen könnten, dass Sie sich für eines entscheiden:
Benannte Exporte
Kann mehrere Werte exportieren
MUSS beim Importieren den exportierten Namen verwenden
Standardexporte
Exportieren Sie einen einzelnen Wert
Kann beim Importieren einen beliebigen Namen verwenden
Dieser Beitrag macht einen guten Job zu erklären, wann es eine gute Idee wäre, eines über dem anderen zu verwenden.
Benannter Export muss nicht denselben Namen verwenden: import { OriginalName as CustomName } from './file'.
– Martin Nuc
13. Juli 2019 um 7:18 Uhr
Sie müssen beim Importieren weiterhin den exportierten Namen verwenden. Aber wahr, Sie können diesen exportierten Namen mit einem anderen Alias Ihrer Wahl versehen.
– Ben
15. Juli 2019 um 22:51 Uhr
@ Ben Was? Nein, Sie müssen nicht den exportierten Namen des Standardexports verwenden. Es ist komplett durchsichtig.
– RoboRobok
27. Januar 2020 um 4:32 Uhr
@RoboRobok Ich denke, das habe ich gesagt? Can use any name when importing
– Ben
27. Januar 2020 um 15:13 Uhr
Ich dachte, Sie sprechen aus irgendeinem Grund über den benannten Standardexport.
– RoboRobok
27. Januar 2020 um 15:16 Uhr
Es ist etwas Ansichtssache, aber es gibt einige objektive Aspekte:
Sie können nur einen Standardexport in einem Modul haben, während Sie beliebig viele benannte Exporte haben können.
Wenn Sie einen Standardexport bereitstellen, muss der Programmierer, der ihn verwendet, einen Namen dafür finden. Dies kann zu Inkonsistenzen in einer Codebasis führen, was Mary tut
import foo from "./foo";
…aber Joe schon
import getFoo from "./foo";
Im Gegensatz dazu muss der Programmierer bei einem benannten Export nicht darüber nachdenken, wie er ihn nennen soll, es sei denn, es gibt einen Konflikt mit einem anderen Bezeichner in seinem Modul. Es ist nur
import { foo } from "./foo";
…(mit einem as getFoo falls nötig, um einen Konflikt zu vermeiden).
Bei einem benannten Export muss die Person, die ihn importiert, den Namen dessen angeben, was sie importiert, was bedeutet, dass sie einen netten frühen Fehler erhält, wenn sie versucht, etwas zu importieren, das nicht existiert.
Wenn du konsequent Verwenden Sie nur benannte Exporte, müssen Programmierer, die aus Modulen im Projekt importieren, nicht darüber nachdenken, ob sie den Standard- oder einen benannten Export wünschen.
Bei benannten Exporten kann man mehrere benannte Exporte pro Datei haben. Importieren Sie dann die gewünschten Exporte, die in geschweiften Klammern eingeschlossen sind. Der Name des importierten Moduls muss mit dem Namen des exportierten Moduls identisch sein.
// imports
// ex. importing a single named export
import { MyComponent } from "./MyComponent";
// ex. importing multiple named exports
import { MyComponent, MyComponent2 } from "./MyComponent";
// ex. giving a named import a different name by using "as":
import { MyComponent2 as MyNewComponent } from "./MyComponent";
// exports from ./MyComponent.js file
export const MyComponent = () => {}
export const MyComponent2 = () => {}
Sie können auch benannte Importe mit einem Alias versehen, einem benannten Export beim Importieren einen neuen Namen zuweisen, um Namenskonflikte zu beheben, oder dem Export einen aussagekräftigeren Namen geben.
import MyComponent as MainComponent from "./MyComponent";
Sie können auch alle benannten Exporte in ein Objekt importieren:
import * as MainComponents from "./MyComponent";
// use MainComponents.MyComponent and MainComponents.MyComponent2 here
Man kann nur einen Standardexport pro Datei haben. Wenn wir importieren, müssen wir einen Namen angeben und importieren wie:
Die Benennung des Imports ist im Standardexport völlig unabhängig und wir können jeden beliebigen Namen verwenden.
Von MDN: Benannte Exporte sind nützlich, um mehrere Werte zu exportieren. Während des Imports kann man denselben Namen verwenden, um auf den entsprechenden Wert zu verweisen. Bezüglich des Standardexports gibt es nur einen einzigen Standardexport pro Modul. Ein Standardexport kann eine Funktion, eine Klasse, ein Objekt oder irgendetwas anderes sein. Dieser Wert ist als „Haupt“-Exportwert zu betrachten, da er am einfachsten zu importieren ist.
Es gibt keine endgültigen Regeln, aber es gibt einige Konventionen, die verwendet werden, um das Strukturieren oder Teilen von Code zu vereinfachen.
Wenn es in der gesamten Datei nur einen Export gibt, gibt es keinen Grund, ihn zu benennen. Wenn Ihr Modul einen Hauptzweck hat, kann es auch sinnvoll sein, diesen zu Ihrem Standardexport zu machen. In diesen Fällen können Sie benannte Exporte extra hinzufügen
Als Reaktion zum Beispiel React ist der Standardexport, da dies oft der einzige Teil ist, den Sie benötigen. Du nicht immer Componentdas ist also ein benannter Export, den Sie bei Bedarf importieren können.
import React, {Component} from 'react';
In den anderen Fällen, in denen ein Modul mehrere gleiche (oder größtenteils gleiche) Exporte hat, ist es besser, benannte Exporte zu verwenden
import { blue, red, green } from 'colors';
1. Methode:-
export foo; //so that this can be used in other file
import {foo} from 'abc'; //importing data/fun from module
2. Methode:-
export default foo; //used in one file
import foo from 'blah'; //importing data/fun from module
3. Methode:-
export = foo;
import * as foo from 'blah';
Die obigen Methoden werden grob zu der folgenden Syntax kompiliert:-
Notiz:- Es kann nur sein one Export default in one Datei.
Wenn wir also nur eine Funktion exportieren, ist es besser, sie zu verwenden default Stichwort beim Exportieren
Sie sollten benannte Exporte fast immer bevorzugen, Standardexporte haben viele Nachteile
Probleme mit Standardexporten:
Es ist schwierig, sie umzugestalten oder Konsistenz sicherzustellen, da sie in der Codebasis einen anderen Namen als den tatsächlichen Namen haben können
Schwierig durch automatisierte Tools zu analysieren oder Code-Intellisense und Autocompletion bereitzustellen
Sie brechen das Baumschütteln, da Sie Webpack zwingen, die gesamte Datei mit dem anderen toten Code zu importieren, der zu größeren Paketgrößen führt, anstatt die einzelne Funktion zu importieren, die Sie verwenden möchten
Sie können nicht mehr als einen einzelnen Export pro Datei exportieren
Sie verlieren den schnelleren/direkten Zugriff auf Importe
Sehen Sie sich diese Artikel an, um eine detailliertere Erklärung zu erhalten:
Lassen Sie uns zunächst die Exportmethoden verstehen, damit wir selbst analysieren können, wann wir was verwenden oder warum wir tun, was wir tun.
Benannte Exporte: Ein oder mehrere Exporte pro Modul. Wenn es mehr als einen Export in einem Modul gibt, muss jeder benannte Export beim Import neu strukturiert werden. Da es beide Exporte im selben Modul geben könnte und der Compiler nicht weiß, welcher erforderlich ist, es sei denn, wir erwähnen es.
//Named export , exporting:
export const xyz = () =>{
}
// while importing this
import {xyx} from 'path'
or
const {xyz} = require(path)
Die geschweiften Klammern strukturieren lediglich das Exportobjekt um.
Auf der anderen Seite sind Standardexporte nur ein Export pro Modul, also sind sie ziemlich einfach.
//exporting default
const xyz =() >{
};
export default xyz
//Importing
import xyz from 'path'
or
const xyz = require(path)
Ich hoffe, das war ziemlich einfach zu verstehen, und jetzt können Sie verstehen, warum Sie React-Module in geschweiften Klammern importieren …
9958100cookie-checkWarum und wann sollte der Standardexport gegenüber benannten Exporten in es6-Modulen verwendet werden?yes
Benannte Exporte sind nützlich, um mehrere Werte zu exportieren. Beim Import muss zwingend der gleiche Name des entsprechenden Objekts verwendet werden. Ein Standardexport kann jedoch mit einem beliebigen Namen importiert werden, zum Beispiel: export default k = 12; // in Datei test.js import m aus ‘./test’ // Beachten Sie, dass wir die Freiheit haben, import m anstelle von import k zu verwenden, weil k der Standardwert war export console.log(m); // wird 12 protokollieren developer.mozilla.org/en-US/docs/web/javascript/reference/…
– Ferhat BAŞ
24. Oktober 2017 um 15:07 Uhr
2ality.com/2014/09/es6-modules-final.html hat eine anständige Erklärung imho. Verwenden Sie default, wenn Sie ein ganzes Modul importieren möchten, Sie müssen die Namen der Methoden dieses Moduls nicht kennen. Verwenden Sie die benannten Exporte, um bestimmte Dinge in das Modul zu importieren.
– Schlau
24. Oktober 2017 um 15:10 Uhr