ES6中import引用加不加花括号的区别

发布于 2023-04-16  602 次阅读

AI 摘要

本文讨论了在ES6中使用import引用模块时加不加花括号的区别。当一个模块使用export default导出时，可以在引入该模块时不加花括号。例如，对于导入A.js模块的B.js文件，如果A.js中使用了export default，可以在B.js中这样引用：import A from './A'。此时，import后面的模块名称是任意的。 另一方面，如果模块A.js中使用了命名导出，并且没有使用export default，那么在引入模块时需要使用花括号，并且必须按照导出的命名方式来引入。例如，如果A.js中导出了一个名为A的变量，那么在B.js中应该这样引用：import { A } from './A'。如果需要引入多个命名导出，也可以一次性将它们导入。 此外，还可以使用as语法进行重命名。例如，import X, { myA as myX, Something as XSomething } from './A'。通过明确了解ES6模块引入时加不加花括号的区别，可以更好地进行模块引入和使用。

不使用花括号引用

对于一个需要引入A.js模块的B.js文件来说
如果A.js模块中使用了export default
即A.js的写法为 export default {...}
则可以使用不带花括号的语法进行引用

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

上述代码中，import模块的命名是随意的，即A可以替换为其他名称，如

//B.js
import Alpha from './A'
import Hello from './A'

它总是会解析到A.js中默认的export default

使用花括号引用

如果在模块A.js中有命名导出为A的export name代码，即

export const A=...

在明确了命名和导出后，在B.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
exportconst A =42
exportconst myA =43
exportconstSomething=44

如果A.js模块中有多个命名，可以一次性将他们导入：

// B.js
import A,{ myA,Something}from'./A'

在导入时，可以使用as语法进行重命名，如：

// B.js
import X,{ myA as myX,SomethingasXSomething}from'./A'

参考文献

  1. ES6-import后加花括号{}和不加花括号引用模块的区别