es6 import ... from "..."和 import {...} from "..."的區別

import ... from "..."和import {...} from "..."的區別和使用方法。

import ... from "..."的使用方法:
// A.js export default 20

// B.js import A from './A'
上面的代碼生效的前提是，只有在A.js中有默認導出的export default語法時才會生效。
這種不使用｛｝來引用模塊的情況下，import模塊的命名是隨意的，即如下三種引用命名都是正確的：
//B.js
import A from './A'
import B from './A'
import Something from './A'
因為它總是會解析到A.js中默認的export default

=========================================

import {...} from "..."的使用方法:
//A.js
export const A = 21

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

代碼生效的前提是，只有在模塊A.js中有如下命名導出為A的export name的代碼,
而且，在明確聲明了命名導出后，那么在另一個js中使用{}引用模塊時，import時的模塊命名是有意義的，如下：

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

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

// A.js export const A= 22 export const B= 23 export const C= 24

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

// A.js
export default 25 export const B = 26 export const C = 27

// B.js import A, { B ,C} from './A'
這里我們使用導入默認導出A，以及命名導出B和C。
也可改默認名:

// B.js import D, { B ,C} from './A'

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