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

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

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


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

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

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

1
2
// A.js
export default 42

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

1
2
3
4
// B.js
import A from './A'
import MyA from './A'
import Something from './A'

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


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

1
import { A } from './A'

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

1
export const A = 42

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

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

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

1
2
3
4
// A.js
export const A = 42
export const myA = 43
export const Something = 44

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

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

这里,我们导入了默认导出为A,与具名的导出myASomething

1
2
3
4
// A.js
export default 42
export const myA = 43
export const Something = 44

我们可以在导入的时候赋给他们不同的名称:

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

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

您的支持将鼓励我继续创作!
0%