引用模块时import后面加上｛｝和不加｛｝的区别

Posted 2023-01-06 Time-Traveler

1、不使用花括号

假如一个B.js，想通过import语法引用模块A.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 Someting from './A'

因为它总是会解析到A.js 中默认的 export default。
2、使用花括号
下面是使用了花括号命名的方式｛A｝来导入A.js

import A from './A'

上面代码生效的前提是，只有在模块A.js 中有如下命名导出为A的export name 的代码，也就是：

export const A=42

而且，在明确声明了命名，导出后，那么在另s一个js中使用｛｝引用模块时，import 时的模块命名是有意义的，如下：

//B.js
import  A  from './A'  //正确，因为A.js 中有命名为A 是export
import  myA  from './A' // 错误!因为A.js 中没有命名为myA的export
import  Someting  from './A' //错误！因为A.js中没有命名为Someting的export

要想上述代码正确执行，你需要明确声明每一个命名导出：

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

PS:一个模块中只能有一个默认导出export default ，但是却可以有任意命名导出（0个，1个，多个），你也可以如下一次性将他们导入，这里我们使用导入默认导出A，以及命名导出myA和Something：

import A,myA,Something from  './A'

我们甚至可以在导入的时候重命名导入：

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

总结：模块的默认导出通常是用在你期望该从模块中获取到任何想要的内容；而命名导出则是用于一些有用的公共方法，但是这些方法并不总是必要的。