es6引用模塊import后面加上花括號{}和不加花括號的區別

在使用import語法引用模塊時，如何正確使用{}

例如：有兩個文件，home.js、user.js

當需要在home.js中引入user.js的時候

 

//home.js

import user from './user';

對於上面的這種引入方法，只有user.js文件中需要提供默認的export defulat進行導出（必須是默認導出）這樣在home.js文件中就可以使用user了。如下

 

//user.js

export default 'nihao'

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

 

// home.js

import user from './user'

import user2 from './user'

import anyUser from './user'

因為它總是會解析到user.js中默認的export default。

 

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

 

import { user } from './user'

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

 

//user.js

export const user = 42

而且，在明確聲明了命名導出后，那么在另一個js中使用{}引用模塊時，import時的模塊命名是有意義的，如下：

 

// home.js

import { user } from './user'           // 正確，因為user.js中有命名為user的export

import { user2 } from './user'          // 錯誤！因為user.js中沒有命名為user2的export

import { anyUser } from './user'        // 錯誤！因為user.js中沒有命名為anyUser的export

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

 

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

// user.js

import user, { user2, anyUser } from './user'

這里我們使用導入默認導出user，以及命名導出user2和anyUser。