ES6引用模块，模块名称命名包含{}与否的区别 javascript

一、前提：
在模块分解后，使用export命令定义了模块的对外接口以后，其他 JS 文件就可以通过import命令加载这个模块。
二、默认：
模块定义文件为a.js，需要引用a.js的文件为main.js。
三、引用方式：
1、如果a.js模块逻辑完成后，如果定义的对外接口方式为： export default a; 或是 export default function(){ console.log('函数执行.'); } ，则在main.js中可以使用如下方式引入：

//main.jsimport a from './a.js' import aaa from './a.js' //或者 import funA from './a.js'

即：如果在a.js中使用了 export default ** 语法，那么就可以在引入该文件的main.js中随便定义该引入模块的名称。（一个a.js文件中，只能有一个 export default ** ）
2、如果a.js内容如下：

//a.jsexport const a; export function each(){ console.log('具名函数'); } export function alertMsg(){ alert('弹出消息'); }

那么，在main.js引入a.js模块时，则需要使用如下方式：

import {a} from './a.js' import {each} from './a.js' import {alert} from './a.js'//或者 import {a,each,alert} from './a.js'//或者重命名 import {a,each as funEach,alert as funAlert} from './a.js'

四、总的来说，在a.js中如果使用 export default ** 语法进行模块导出的话，则可以随意命名模块变量的名称；如没有采用该语法，则需要原原本本的将该具名定义的元素以{name}的形式导入，如果想要重命名，可以使用as 进行重命名。

【ES6引用模块，模块名称命名包含{}与否的区别】转载于:https://www.cnblogs.com/EFPlatform/p/10362365.html