何时使用“import * as Foo”与“import Foo”？ [复制]答案

【问题标题】：When to use "import * as Foo" versus "import Foo"? [duplicate]何时使用“import * as Foo”与“import Foo”？ [复制]
【发布时间】：2015-11-21 01:20:39
【问题描述】：

我正在将 BackboneJS (v1.2.2) 项目转换为带有 BabelJS 的 ES6。

我注意到两者之间存在差异：

import Backbone from 'backbone'

和

import * as Backbone from 'backbone'

在阅读here 之后，我了解到前者正在导入 Backbone 的默认导出，而后者允许我“导入整个模块并通过属性表示法引用其命名导出”。

我很难理解这些之间的区别。在这两种情况下都会返回对象，但前者似乎用额外的属性/方法装饰。至少我会假设导入“整个模块”会有更多的属性/方法......但我看到的是相反的。

【问题讨论】：

“附加属性/方法”的例子有哪些？
第一个实例似乎用其他插件的属性装饰。例如，我加载了“backbone.localStorage”插件，我看到在 Backbone 上定义了“LocalStorage”，但是，现在我想起来，这是有道理的，因为“backbone.localStorage”将自己写入全局 Backbone 对象。后者返回一个不受“backbone.localStorage”修改影响的命名空间实例。

标签： javascript import ecmascript-6

【解决方案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 */

【讨论】：

export {b: 2} as b; 无效。
@JMM - 正确，已修复。
export { {b: 2} as b } 也无效。我想你想要的是export var b = {b: 2}; 或var b = {b: 2}; export {b};
@JMM - 再次正确！我的印象是您可以在使用“as Name”语法时导出直接值，但显然您不能！再次修改！

【解决方案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';

【讨论】：