在ES6模塊特性中，import時如何正確使用花括號'{ }'

在 ES6 以前，社區制定了一些模塊加載方案，最主要的有 CommonJS 和 AMD 兩種。前者用於服務器，後者用於瀏覽器。ES6 在語言標準的層面上，實現了模塊功能，並且實現得至關簡單，徹底能夠取代 CommonJS 和 AMD 規範，成爲瀏覽器和服務器通用的模塊解決方案。

上文引用自：阮一峯老師的ECMAScript 6 入門。

---

而咱們這裏要說的是在使用import語法引用模塊時，如何正確使用{}。

假若有一個B.js，想要經過import語法引用模塊A.js，那麼能夠這麼寫：

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

而上面的代碼生效的前提是，只有在以下A.js中有默認導出的export default語法時纔會生效。也就是：

// A.js
export default 42

在這種不使用{}來引用模塊的狀況下，import模塊時的命名是隨意的，即以下三種引用命名都是正確的：

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

由於它老是會解析到A.js中默認的export default。

---

而下面是使用了花括號命名的方式{A}來導入A.js：

import { A } from './A'

上面代碼生效的前提是，只有在模塊A.js中有以下命名導出爲A的export name的代碼，也就是：

export const A = 42

並且，在明確聲明瞭命名導出後，那麼在另外一個js中使用{}引用模塊時，import時的模塊命名是有意義的，以下：

// B.js
import { A } from './A'                 // 正確，由於A.js中有命名爲A的export
import { myA } from './A'               // 錯誤！由於A.js中沒有命名爲myA的export
import { Something } from './A'         // 錯誤！由於A.js中沒有命名爲Something的export

要想上述代碼正確執行，你須要明確聲明每個命名導出：

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

ps: 一個模塊中只能有一個默認導出export default，可是卻能夠有任意命名導出（0個、1個、多個），你也能夠以下，一次性將他們導入：

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

這裏咱們使用導入默認導出A，以及命名導出myA和Something。

咱們甚至能夠在導入的時候重命名導入：

import X, { myA as myX, Something as XSomething } from './A'

總結：模塊的默認導出一般是用在你指望該從模塊中獲取到任何想要的內容；而命名導出則是用於一些有用的公共方法，可是這些方法並不老是必要的。

原文stackoverflow：原文地址，若有問題歡迎指出。