3分钟带你搞懂ES6 import 和 export

Posted 2020-10-02 Skura

如下语句是 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‘