码迷,mamicode.com
首页 > 其他好文 > 详细

es6引用模块import后面加上花括号{}和不加花括号的区别

时间:2019-09-05 19:01:15      阅读:339      评论:0      收藏:0      [点我收藏+]

标签:any   exp   nihao   代码   而且   命名   use   情况   port   

在使用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。

 

es6引用模块import后面加上花括号{}和不加花括号的区别

标签:any   exp   nihao   代码   而且   命名   use   情况   port   

原文地址:https://www.cnblogs.com/ranyonsue/p/11468727.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!