Warum muss ich einige Importe in eckigen Klammern {} in ES6 einfügen?

Question

Ich habe eine seltsame Situation in ES6 gefunden. Zum Beispiel verwende ich die npm-Pakete react und react-router. Ich möchte, dass sie in die Datei importieren:

import React from "react"; 
import { browserHistory } from "react-router"; 

Die seltsame Situation ist, dass ich browserHistory in Figur Klammern wickeln müssen, aber ich brauche nicht zu wickeln React. Was ist der Grund?

import { React } from "react"; // React is undefined 
import browserHistory from "react-router"; // browserHistory is undefined 

Was ist der Grund, dass ich meinen Import anpassen muss?

Answer 1

Wenn das Modul, das Sie importieren, einen Standardexport hat, müssen Sie nicht die Syntax {} verwenden, um auf den angegebenen Export zuzugreifen. Auf benannte (nicht standardmäßige) Exporte muss über die Syntax {} zugegriffen werden. Ein Modul kann sowohl einen Standardexport als auch viele benannte Exporte haben.

Ein Beispiel dafür wäre React, das ein Standardexport ist, aber das Modul hat auch einen benannten Export von Component. Um diese beiden Exporte zu importieren, wird die Syntax import React, { Component } from 'react' verwendet.

Answer 2

ES6-Module unterscheiden zwischen zwei Exportarten: Standardexporte und andere Exporte.

Jedes Modul kann höchstens einen Standard-Export haben. Ein Standard-Export ist quasi die "Hauptattraktion" eines Moduls. Es sollte die eine Sache sein, die Sie wahrscheinlich das Modul gemeint haben. Alle anderen Exporte passen in die andere Kategorie.

So ein Modul kann eine beliebige Anzahl von Exporten haben (sogar Null), von denen höchstens ein Standard-Export sein kann.

Auf den export side der Syntax, wird ein Standardexport einfach durch Hinzufügen eines default nach dem export Stichwort markiert:

// this is a normal export 
export var foo = 'foo'; 

// this is a default export 
var bar = 'bar'; 
export default bar; 

Auf den import side der Syntax, dies ist ein wird es komplizierter: Standard Exporte außerhalb von geschweiften Klammern importiert. Alle anderen Exporte werden in geschweifte Klammern importiert.

import bar, { foo } from 'some-module'; 

Dies würde den Standard importieren exportierte Mitglied des Moduls als bar und auch den (genannt) anderen Export foo importieren. Beachten Sie, dass Standardexporte keinen festen Namen haben: Der ursprüngliche Name des Mitglieds zum Zeitpunkt des Exports spielt keine Rolle. Stattdessen geben Sie ihm beim Importieren einen Namen. So können Sie auch dies stattdessen schreiben:

import baz, { foo } from 'some-module'; 

Dies würde immer noch den gleichen Standard-Export aus dem Modul importieren, aber geben Sie ihm einen anderen Namen. Andere Importe müssen jedoch den richtigen Namen haben, da sie zur Identifizierung verwendet werden. Sie können ihnen jedoch einen anderen Namen geben, indem Sie das Schlüsselwort as verwenden.

Es gibt ein paar weitere Dinge zu wissen, wenn Sie die export und import Anweisungen verwenden. Sie sollten MDN für eine vollständige Beschreibung von ihnen überprüfen.