ES6中模块具名和默认导入导出

2018年9月28日

ES6模块中有关默认和具名导出，是一个比较容易出错的地方。

这里翻译了一下Stackoverflow上的一个解答，来自React社区的Dan Abramov的回答。

这是一个默认导入(default import):

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

这只有在A中具有默认的导出(default export):

// A.js
export default 42

在这种情况下导入时不会在乎你使用什么名称：

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

因为它总是会解析A的默认导出

这是一个名称为A具名的导入:

import { A } from './A'

这只在A中包含一个叫做A具名的导出：

export const A = 42

在这种情况下，名称是有影响的，因为你通过导出名称来导入一个具体的内容：

// B.js
import { A } from './A'
import { myA } from './A' // 无法工作
import { Something } from './A' // 无法工作

为了让这些能够工作，你需要添加对应的具名导出到A：

// A.js
export const A = 42
export const myA = 43
export const Something = 44

一个模块只能拥有一个默认导出，但是可以有任意多个具名导出(零个，一个，两个或更多)。你可以一起导入他们：

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

这里，我们导入了默认导出为A，与具名的导出myA和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'

默认导出倾向于用在任意你期望从模块中正常获取的内容。具名导出倾向于用在好用的地方，但不是必须的。然而，取决于你如何导出内容：比如，一个模块可能完全没有默认导出。