使用import和export default进行默认导出和命令导出

使用import和export default进行默认导出和命令导出

1、默认导入：

// B.js
import A from './A'

只有 A具有默认导出时才有效：

// A.js
export default 35

在这种情况下，导入时为其指定的名称无关紧要：

// B.js
import A from './A'
import MyA from './A'
import Something from './A'

因为它将始终解析为默认导出任何内容 A。

2、命名导出：

这是一个名为import的导入 A：

import { A } from './A'

它仅在 A包含名为的导出 A时才有效：

export const A = 35

在这种情况下，名称很重要，因为您通过其导出名称导入

命名导出实例：

// 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 = 33
export const myA = 34
export const Something = 35

一个模块只能有一个默认导出，但是你可以拥有多个命名导出（0，1，2或许多）。可以将它们全部导入：

// B.js
import A, { myA, Something } from './A'

在这里，我们将默认导出导入为 A，并分别命名为exports myA和 Something。

// A.js
export default 33
export const myA = 34
export const Something = 35

我们还可以在导入时为它们分配所有不同的名称：

// B.js
import X, { myA as myX, Something as XSomething } from './A'

默认导出倾向于用于您通常希望从模块获得的任何内容。

命名导出往往用于可能很方便的实用程序，但并不总是必需的。