utilizzando staffe con javascript sintassi importazione

Question

mi sono imbattuto in una libreria javascript che utilizza la seguente sintassi per importare librerie:

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

Qual è la differenza tra il metodo di cui sopra e la seguente?

import React, Component, PropTypes from 'react'; 

Answer 1

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

Questo dice:

Importare il predefinita esportazione dal 'react' sotto il nome React e importare i nome esportazioni Component e PropTypes con gli stessi nomi.

Questa combina le due sintassi comuni che probabilmente avete visto

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

Il primo viene utilizzato per importare e denominare l'esportazione di default, il secondo per importare le esportazioni di nome specificati.

Come regola generale, la maggior parte dei moduli fornirà un'unica esportazione predefinita o un elenco di esportazioni denominate. È un po 'meno normale che un modulo fornisca un'esportazione predefinita denominata esportazioni e. Tuttavia, nel caso in cui vi sia una caratteristica che è più comunemente importata, ma anche sotto-funzioni aggiuntive, è un progetto valido per esportare il primo come predefinito e i rimanenti come esportati con nome. In questi casi si utilizza la sintassi import a cui si fa riferimento.

Le altre risposte sono da qualche parte tra errate e confuse, probabilmente perché i documenti MDN al momento in cui è stata posta questa domanda erano sbagliati e confusi. MDN ha mostrato l'esempio

import name from "module-name"; 

e disse name è il "nome dell'oggetto che riceverà i valori importati." Ma questo è fuorviante e scorretto; prima di tutto, c'è solo un valore di importazione, che verrà "ricevuto" (perché non dire solo "assegnato a" o "usato per fare riferimento a") name e il valore di importazione in questo caso è il valore predefinito esportare dal modulo.

Un altro modo di spiegare questo è da notare che quanto sopra importazione è proprio identico a

import { default as name } from "module-name"; 

e l'esempio del PO è proprio identico a

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

La documentazione MDN ha continuato a mostrare la esempio

import MyModule, {foo, bar} from "my-module.js"; 

e ha affermato che significa

Importare i contenuti di un intero modulo, con alcuni anche con un nome esplicito. Inserisce myModule (sic), foo e bar nell'ambito corrente. Si noti che foo e myModule.foo sono gli stessi, come lo sono bar e myModule.bar

Cosa MDN detto qui, e ciò che altre risposte rivendicare sulla base della documentazione MDN non corretta, è assolutamente sbagliato, e può basarsi su una versione precedente di la spec. Ciò che effettivamente fa è

Importare l'esportazione del modulo predefinito e alcune esportazioni con nome esplicito. Inserisce MyModule, foo e bar nell'ambito corrente. non accessibile tramite MyModule, che è l'impostazione predefinita esportazione, non un ombrello che copre tutte le esportazioni I nomi di esportazione foo e bar sono .

(L'esportazione del modulo di default è il valore esportato con la export default sintassi, che potrebbe anche essere export {foo as default}.)

MDN scrittori di documentazione può avere ottenuto confuso con il seguente modulo:

import * as MyModule from 'my-module'; 

Importa tutte le esportazioni da my-module e le rende accessibili sotto nomi come MyModule.name. L'esportazione predefinita è anche accessibile come MyModule.default, poiché l'esportazione predefinita non è altro che un'altra esportazione denominata con il nome default.In questa sintassi, non v'è alcun modo per importare solo un sottoinsieme delle esportazioni di nome, anche se si potrebbe importare l'esportazione di default, se ce n'è uno, insieme a tutte le esportazioni di nome, con

import myModuleDefault, * as myModule from 'my-module'; 

Answer 2

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

Ciò afferrare le esportati { Component, PropTypes } membri dal modulo 'react' e assegnarli a Component e PropTypes, rispettivamente. React sarà uguale all'esportazione default del modulo.

As noted by torazaburo below, questo è lo stesso

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

che è un'abbreviazione per

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

Ecco un altro esempio (link to 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...' 

---

ho testato le s econd esempio con babele:

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

e ottenuto un errore di sintassi.

~/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 | 

---

Per riferimento, si può leggere sul nuovo import documentazione MDN. Tuttavia, è apparentemente necessario un riesame tecnico. Dr. Axel Rauschmayer's blog post è un riferimento migliore per ora.