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

Warum und wann sollte der Standardexport gegenuber benannten Exporten in
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:

// import

import MyDefaultComponent from "./MyDefaultExport";

// export

const MyComponent = () => {}

export default MyComponent;

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:-

//alle Exportmethoden

exports.foo = foo; //1st method
exports['default'] = foo; //2nd method
module.exports = foo; //3rd method

//alle Importmethoden

var foo = require('abc').foo; //1st method
var foo = require('abc')['default']; //2nd method
var foo = require('abc'); //3rd method

Weitere Informationen finden Sie unter Standard-Keyword-Erklärung

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:

  1. Es ist schwierig, sie umzugestalten oder Konsistenz sicherzustellen, da sie in der Codebasis einen anderen Namen als den tatsächlichen Namen haben können
  2. Schwierig durch automatisierte Tools zu analysieren oder Code-Intellisense und Autocompletion bereitzustellen
  3. 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
  4. Sie können nicht mehr als einen einzelnen Export pro Datei exportieren
  5. Sie verlieren den schnelleren/direkten Zugriff auf Importe

Sehen Sie sich diese Artikel an, um eine detailliertere Erklärung zu erhalten:

https://blog.neufund.org/why-we-have-banned-default-exports-and-you-should-do-the-same-d51fdc2cf2ad

https://humanwhocodes.com/blog/2019/01/stop-using-default-exports-javascript-module/

https://rajeshnaroth.medium.com/avoid-es6-default-exports-a24142978a7a

Warum und wann sollte der Standardexport gegenuber benannten Exporten in
Dwaipayan Chakroborty

EINFACHSTE DEFINITION ZUR LÖSUNG VON VERWIRRUNGEN

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 …

995810cookie-checkWarum und wann sollte der Standardexport gegenüber benannten Exporten in es6-Modulen verwendet werden?

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy