Quando utilizzare "import * as Foo" rispetto a "import Foo"?

Question

Sto convertendo un progetto BackboneJS (v1.2.2) in ES6 con BabelJS.

ho notato che c'è una differenza tra:

import Backbone from 'backbone' 

e

import * as Backbone from 'backbone' 

Dopo aver letto here ho capito che il primo è l'importazione del esportazione di default di Backbone dove, come quest'ultimo mi permette di " importare l'intero modulo e fare riferimento alle sue esportazioni nominate tramite la notazione delle proprietà. "

Sto lottando per capire la differenza tra questi. Gli oggetti vengono restituiti in entrambe le istanze, ma il primo sembra essere decorato con proprietà/metodi aggiuntivi. Per lo meno presumerei di importare "l'intero modulo" avrebbe più proprietà/metodi ... ma sto vedendo il contrario.

Answer 1

un modulo può esportare una singola "esportazione predefinita" e/o una o più esportazioni denominate.

L'importazione con la prima sintassi nella domanda importa solo l'esportazione predefinita e imposta un identificatore denominato (Backbone nel campione) su tale oggetto.

La seconda sintassi è nota come importazione di spazio dei nomi e importa l'intero modulo sotto un singolo oggetto "spazio dei nomi".

Ad esempio:

export.js

let b = {b: 2}; 
export default {a: 1}; // <- this is the ONLY default export 
export {b}; 
export let c = {c: 3}; 

import.js

import SomeName from 'export'; // 'SomeName' is now the {a: 1} instance. 
import {b} from 'export'; // 'b' is now the {b: 2} instance. 
import * as ns from 'export'; /* 'ns' now has properties 'default', 'b' & 'c', 
    representing {a: 1}, {b: 2} & {c: 3} respectively */ 

Answer 2

Dipende sull'interfaccia del modulo e come si desidera utilizzarlo . Nel caso del pacchetto npm di Backbone non esiste in realtà un'esportazione predefinita, quindi entrambe le versioni dovrebbero essere approssimativamente equivalenti se traspolate da Babel.

Per lo meno mi azzarderei importare "l'intero modulo" avrebbe più proprietà/metodi

Dipende da quello che l'esportazione di default è e ciò che di nome esportazioni ci sono. Ecco un esempio di dove questo non sarebbe il caso:

exporter.js

export default { 
    one: "One", 
    two: "Two", 
    three: "Three", 
}; 

export var a; 

importer.js

// Has 3 props ['one', 'two', 'three'] 
import defaultExport from 'exporter'; 

// Has 2 props ['default', 'a']. 
import * as allExports from 'exporter';