Verwenden von Klammern mit Javascript-Import-Syntax

Stieß ich auf eine javascript-Bibliothek, verwendet die folgende syntax zum importieren von Bibliotheken:

import React, { Component, PropTypes } from 'react';

Was ist der Unterschied zwischen der obigen Methode und der folgenden?

import React, Component, PropTypes from 'react';

InformationsquelleAutor der Frage fox | 2015-06-28

154
```
import React, { Component, PropTypes } from 'react';
```
Dieser sagt:

Importieren Sie die Standard export von 'react' unter dem Namen React und importieren Sie die namens Exporte Component und PropTypes unter dem gleichen Namen.

Diese verbindet die beiden gemeinsame Syntax, die Sie haben wahrscheinlich gesehen
```
import React from 'react';
import { Component, PropTypes } from 'react';
```
Die erste wird verwendet, um zu importieren und name der Standard-export, die zweite zum importieren der angegebenen Namen exportiert.

Als eine Allgemeine Regel, bei den meisten Modulen wird Ihnen entweder ein Einzel -, Standard zu exportieren oder eine Liste mit den Namen der Exporte. Es ist etwas weniger üblich für ein Modul sowohl eine Standard-export - und namens exportiert. Jedoch in dem Fall, wo es ein Merkmal, das am häufigsten importiert, sondern auch weitere sub-Funktionen, es ist eine gültige design zu exportieren die erste als Standard, und die restlichen können als namens-Exporte. Es ist in solchen Fällen verwenden Sie die import syntax, die Sie finden.

Die anderen Antworten sind irgendwo zwischen falsch und verwirrend, vielleicht, weil die MDN-Dokumente an der Zeit diese Frage gestellt wurde, waren falsch und verwirrend. MDN zeigte das Beispiel
```
import name from "module-name";
```
und sagte name ist der "name des Objekts, erhalten die importierten Werte." Aber das ist irreführend und falsch, zuerst von allen, es ist nur eine import Wert, die "empfangen" (warum nicht einfach sagen, "zugewiesen" oder "siehe") nameund der import-Wert in diesem Fall ist die Standard-export aus dem Modul.

Einem anderen Weg zu erklären, dies ist zu beachten, dass die oben importieren ist genau identisch mit
```
import { default as name } from "module-name";
```
und die OP ' s Beispiel ist genau identisch mit
```
import { default as React, Component, PropTypes } from 'react';
```
Den MDN-Dokumentation ging auf, um zu zeigen, das Beispiel
```
import MyModule, {foo, bar} from "my-module.js";
```
und behauptet, dass es bedeutet,

Import eines Moduls-Inhalte, mit einigen auch explizit benannt. Dieser fügt myModule (sic), foound bar in den aktuellen Bereich. Beachten Sie, dass foo und myModule.foo sind die gleichen, wie bar und myModule.bar

Was MDN hier gesagt, und was andere Antworten, basierend auf die falsche MDN-Dokumentation, ist absolut falsch und beruht möglicherweise auf einer früheren version der spec. Was dies tatsächlich tut, ist

Importieren Sie die Standard-module export und einigen ausdrücklich benannten Exporte. Dieser fügt MyModulefoound bar in den aktuellen Bereich. Die Namen exportieren foo und bar sind nicht zugänglich über MyModuledie die Standard export, kein Dach über alle Exporte.

(Das Standard-Modul, export-Wert-Export mit der export default syntax, die auch in export {foo as default}.)

Den MDN-Dokumentation Autoren bekommen verwechseln mit der folgenden form:
```
import * as MyModule from 'my-module';
```
Diese Importe alle Exporte von my-moduleund macht Sie zugänglich unter Namen wie MyModule.name. Der Standard-export ist auch zugänglich wie MyModule.defaultda die Standard-export ist wirklich nichts mehr als eine weitere namens export mit dem Namen default. In dieser syntax, es gibt keine Möglichkeit zu importieren, die nur einen Teil des namens Exporte, obwohl man könnte den import der Standard-export, wenn es einer ist, zusammen mit den Namen Export,
```
import myModuleDefault, * as myModule from 'my-module';
```
InformationsquelleAutor der Antwort

import React, { Component, PropTypes } from 'react'

Diese greifen, werden die exportierten { Component, PropTypes } Mitglieder aus der 'react' Modul, und ordnen Sie Sie Component und PropTypes bzw. React wird gleich das Modul default exportieren.

Wie bereits von torazaburo untendas ist das gleiche wie

import { default as React, Component, PropTypes } from 'react'

ist die Kurzform für

import { default as React, Component as Component, PropTypes as PropTypes} from 'react'

Hier ist ein weiteres Beispiel (link zu gist):

//myModule.js
export let a = true
export let b = 42
export let c = 'hello, world!'
//`d` is not exported alone
let d = 'some property only available from default'

//this uses the new object literal notation in es6
//{myVar} expands to { myVar : myVar }, provided myVar exists
//e.g., let test = 22; let o = {test}; `o` is then equal to { test : 22 }
export default { a, b, d }

//example1.js
import something from 'myModule'
console.log(something)
//this yields (note how `c` is not here):
/*
  {
    a : true,
    b : 42,
    d : 'some property only available from default'
  }
*/

//example2.js
import something, { c } from 'myModule'
console.log(something)  //same as above; the `default` export
console.log(c)          //c === 'hello, world!'

//example3.js
import { a, b, d, default as something } from 'myModule'
console.log(a)            //a === true
console.log(b)            //b === 42
console.log(d)            //d === undefined (we didn't export it individually)
console.log(something.d)  //something.d === 'some property...'

Getestet habe ich das zweite Beispiel mit babel:

import test, test3, test2 from './app/lib/queries.js'
console.log(test, test3, test2)

sich und bekam einen syntax-Fehler.

~/code/repo/tutoring $ babel-node test.js
/Users/royhowie/.node/lib/node_modules/babel/node_modules/babel-core/lib/babel/transformation/file/index.js:601
      throw err;
            ^
SyntaxError: /Users/royhowie/code/repo/tutoring/test.js: Unexpected token (1:13)
> 1 | import test, test3, test2 from './app/lib/queries.js'
    |              ^
  2 | 
  3 | console.log(test, test3, test2)
  4 |

Referenz, Lesen Sie auf der neuen import Dokumentation von MDN. Allerdings ist es offenbar in der Notwendigkeit der technischen überprüfung. Dr. Axel Rauschmayer blog-post ist eine bessere Referenz für jetzt.

InformationsquelleAutor der Antwort royhowie

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.