Когда использовать "import * как Foo" или "import Foo"?

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

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

import Backbone from 'backbone'

import * as Backbone from 'backbone'

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

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

Ответ 1

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

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

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

Например:

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

Ответ 2

Это зависит от интерфейса модуля и того, как вы хотите его использовать. В случае пакета Backbone npm на самом деле нет экспорта по умолчанию, поэтому обе версии должны быть примерно эквивалентными при переводе с помощью 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';