Когда использовать "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';