Когда использовать «import * as Foo» в сравнении с «import Foo»?

Question

Я конвертирую проект BackboneJS (v1.2.2) в ES6 с BabelJS.

Я заметил, что есть разница между:

import Backbone from 'backbone' 

и

import * as Backbone from 'backbone' 

После прочтения here Я понимаю, что бывший импорта экспорта по умолчанию Backbone, где, как последняя позволяет мне " импортировать весь модуль и ссылаться на его названный экспорт через обозначение свойства. "

Я изо всех сил пытаюсь понять разницу между ними. Объекты возвращаются в обоих экземплярах, но первый, кажется, украшен дополнительными свойствами/методами. По крайней мере, я предполагаю, что импорт «всего модуля» будет иметь больше свойств/методов ... но я вижу обратное.

Answer 1

модуль может экспортировать один «экспорт по умолчанию» и/или один или несколько названных экспорт.

Импорт с первым синтаксисом в вашем вопросе импортирует только экспорт по умолчанию и задает идентификатор имени (базовую линию в вашем примере) для этого объекта.

Второй синтаксис известен как импорт пространства имен, и он импортирует весь модуль под одним объектом «пространства имен».

Например:

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

Это зависит от интерфейса модуля, и как вы хотите использовать его , В случае пакета npm Backbone на самом деле нет экспорта по умолчанию, поэтому обе версии должны быть примерно эквивалентными при передаче с помощью Babel.

По крайней мере, я бы предположить, импортируя «весь модуль» будет иметь больше свойств/методов

Это зависит от того, что экспорт по умолчанию является и то, что назвал экспорт Есть. Вот пример того, что не было бы так:

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';