这是默认导入:
// B.js
import A from './A'
只有A具有默认导出时才有效:
// A.js
export default 42
在这种情况下,导入时为其指定的名称无关紧要:
// B.js
import A from './A'
import MyA from './A'
import Something from './A'
因为它将始终解析为默认导出任何内容A。
这是一个名为import的导入
A
:import { A } from './A'
它仅在
A
包含名为的导出A
时才有效:export const A = 42
在这种情况下,名称很重要,因为您通过其导出名称导入
特定的东西:
// B.js
import { A } from './A'
import { myA } from './A' // Doesn't work!
import { Something } from './A' // Doesn't work!
要使这些工作,您可以将相应的命名导出添加到
A
:// A.js
export const A = 42
export const myA = 43
export const Something = 44
一个模块只能有一个默认导出,但是你可以拥有
多个命名导出(零,一,二或许多)。您可以将它们全部导入:
// B.js
import A, { myA, Something } from './A'
在这里,我们将默认导出导入为
A
,并分别命名为exportsmyA
和Something
。// A.js
export default 42
export const myA = 43
export const Something = 44
我们还可以在导入时为它们分配所有不同的名称:
// B.js
import X, { myA as myX, Something as XSomething } from './A'
默认导出倾向于用于您通常希望从模块获得的任何内容。
命名导出往往用于可能很方便的实用程序,但并不总是必需的。
但是,您可以选择如何导出内容:例如,模块可能根本没有默认导出。
引用David Herman
:ECMAScript 6支持单/默认导出样式,并为导入默认值提供最甜蜜的语法。
导入命名导出可以,甚至应该略微简洁。
但是在TypeScript中,由于重构,命名导出很受欢迎。
例如,如果默认导出类并重命名,则类名将仅在该文件中更改而不在其他引用中更改,并且将在所有引用中重命名命名的导出类名。
实用程序也首选命名导出。
总体使用你喜欢的任何。
额外
默认导出实际上是名为default的命名导出,因此可以将默认导出导入为:
import {default as Sample} from '../Sample.js';