如下语句是 default import:
// B.js
import A from './A'
且只在A存在 default export 时生效:
// A.js
export default 42
这种情况下你用import语句, 随便取什么名字都没关系:
// B.js
import A from './A'
import MyA from './A'
import Something from './A'
因为他最终解析的是A.js 的 default export.
如下是命名为A的 import :
import { A } from './A'
它只在A.js存在 具名export 时起作用, 像这样:
// A.js
export const A = 42
这种情况下指定命名是有必要的, 因为你要从A.js的 export 里 import 即引入特定东西:
// B.js
import { A } from './A'
import { myA } from './A' // 无效!
import { Something } from './A' // 无效!
要使引入生效, 你需要添加对应的 具名export :
// A.js
export const A = 42
export const myA = 43
export const Something = 44
每个 module 只能有一个 default export, 但可以有任意多个 具名export, 也可以将它们放在一起引用:
// B.js
import A, { myA, Something } from './A'
可以看到这里我们引入了 default export 并命名为A, 引入 A.js 的 myA 和 Something 这两个具名export
// A.js
export default 42
export const myA = 43
export const Something = 44
import时我们还可以用 as 语句为他们起个别名:
// B.js
import X, { myA as myX, Something as XSomething } from './A'