本文学习来源:ES6中export default 命令的详解(引用)
如有错误请及时指正,谢谢~

1. export加default和不加的区别

// aaa.js: 有default
export default function crc32(){
	...
}

// bbb.js:
import crc32 from './aaa.js' // 导入



// ccc.js: 没有default
export function crc32(){
	...
}

// ddd.js:
import {crc32} from './ccc.js' // 没有default,需要加大括号才能导入

2. export default的含义

export default 就是把default 后面的变量赋值给default这个变量,然后将default这个变量暴露出去,等别的模块import的时候系统允许你为它取任意名字。export default在一个文件中只能有一个

export var a = 1; // 语法正确

var a = 1;
export default a; // 语法正确

export default 42; // 语法正确


// 上面两种写法是将变量a的的值赋值给变量default。

export default var a = 1; // 语法错误,因为是要将default后面的值赋值给default,default后面应该直接写值或变量;

export 42; // 语法错误,因为export后面没有指定对外暴露的变量。

3. 同时导入多个变量

如果想在一条import语句中同时导入多个变量或方法,可以写成以下形式:

// lodash.js中的内容:
export default function(){...}
export function each(){...}
export { each as forEach } 

// 其他文件导入使用:
import __,{ each, each as forEach } from 'lodash'

4. 导入类

使用export default暴露和导入类

// a.js
export default class{
	...
}

// b.js
import MyClass from 'a';
let myclass = new MyClass();

Q.E.D.


做一个热爱生活的人