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

Posted 2023-02-22

【中文标题】何时使用“import * as Foo”与“import Foo”？ [复制]

【英文标题】：When to use "import * as Foo" versus "import Foo"? [duplicate]

【发布时间】：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”修改影响的命名空间实例。

【参考方案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';