ES6，import時如何正確使用花括號'{ }'

在 ES6 之前，社區制定了一些模塊加載方案，最主要的有 CommonJS 和 AMD 兩種。前者用於服務器，后者用於瀏覽器。ES6 在語言標准的層面上，實現了模塊功能，而且實現得相當簡單，完全可以取代 CommonJS 和 AMD 規范，成為瀏覽器和服務器通用的模塊解決方案。

---

而我們這里要說的是在使用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'

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

轉：https://blog.csdn.net/function__/article/details/79040111

（一句話總結上面的用法：是默認導出（就是在defau{}里面的），就要不加{}，其他就需要加{}）