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

ES6-import后加花括号{}和不加花括号引用模块的区别
使用花括号
在A文件中想要引用B文件模块，所引入的名字必须与B文件中导出的名字相同
在A.js中
export const A{ *** }
那么在B.js中

import { A } from './A' //正确，因为A.js中有命名为A的export
import {A1} from './A' //错误，因为A.js中没有命名为A1的export

不使用花括号
在不使用花括号的情况下，import使用的命名是随意的
即在B.js中
import A from ',/A' //正确
import A1 from './A' //正确

但是，不使用花括号{}引用的前提是，在A.js中 必须有默认导出的export default才能生效
即在A.js中需要改动成下面的代码

const A { *** }；
export default A;

那么，我们为什么要有这种写法呢？
从上面第1点加花括号的例子我们可以看到，使用import命令，需要清楚的知道所要加载的变量名或者函数名，一旦写错就无法引用。那么export default命令便可以实现在引入的时候随意指定名称使用，大大方便了程序员。
显然，一个模块只能有一个默认输出，因此，A.js中，export default命令只能使用一次，所以import后面才不用加大括号，应为只会对应唯一的export default命令。

 

webpack 引入模块import 后面加入{}和不加大括号有什么区别

export default命令用于指定模块的默认输出。显然，一个模块只能有一个默认输出，因此export deault命令只能使用一次。所以，import命令后面才不用加大括号，相反其它的export 输出 可以有多个，且import时必须加大括号

也就是说，通过import xxx from "..."引入的，xxx已经是默认导出项的别名了。
而import { xxx } from "..."引入的，{ xxx }只是导出项的名字，而并非导入时的名字。