ES6 import什么时候使用花括号？

This is a default import:

// B.js
import A from './A'
复制代码

It only works if A has the default export:

// A.js
export default 42
复制代码

In this case it doesn’t matter what name you assign to it when importing:

// B.js
import A from './A'
import MyA from './A'
import Something from './A'
复制代码

Because it will always resolve to whatever is the default export of A.

This is a named import called A:

import { A } from './A'
复制代码

It only works if A contains a named export called A:

export const A = 42
复制代码

In this case the name matters because you’re importing a specific thing by its export name:

// B.js
import { A } from './A'
import { myA } from './A' // Doesnot work!
import { Something } from './A' // Doesnot work!
复制代码

To make these work, you would add a corresponding named export to A:

// A.js
export const A = 42
export const myA = 43
export const Something = 44
复制代码

A module can only have one default export, but as many named exports as you'd like (zero, one, two, or many). You can import them all together:

// B.js
import A, { myA, Something } from './A'
复制代码

Here, we import the default export as A, and named exports called myA and Something, respectively.

// A.js
export default 42
export const myA = 43
export const Something = 44
复制代码

We can also assign them all different names when importing:

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

The default exports tend to be used for whatever you normally expect to get from the module. The named exports tend to be used for utilities that might be handy, but aren’t always necessary. However it is up to you to choose how to export things: for example, a module might have no default export at all.

参考：

ECMAScript 6 modules: the final syntax

ES6 Modules(模块)系统及语法详解