弄清楚 export 与 export default

弄清楚 export 与 export default

ES6的模块导出 export 与 export default，模块引入 import … from …

一、export 可以导出变量声明表达式以及对象的字面量表达式。

// 导出变量声明表达式
export let name = 'wang';

// 导出字面量形式的对象
let age = 24;
let school = 'ruc'
export { age, school };

// 导出函数，与一般变量类似
export function add(m, n) {
	return m + n;
}
function minus(m, n) {
	return m - n;
}
export { minus };

对应的引入方式 import { } from …

import { name, age, school } from './main'
console.log(name + age + school); // wang24ruc

import { add, minus } from './main'
console.log(add(1, 2)); // 3
console.log(minus(2 ,1)); // 1

这里引入的变量名和导出的变量名要对应。

每一个模块可以有很多个 export ,而每个模块只能有一个默认导出，即 export default 。

二、export default 的含义是将接在其后面的值赋给default 这个变量，所以后面可以接变量名、匿名函数以及字面量对象等等表示值的内容。

也就意味着后面不可以接变量声明表达式（函数声明可以，会当作匿名函数处理）。

// 默认导出变量名
let author = 'wang';
export default author;

// 导出字面量对象
export default {
	firstName: 'wang',
	lastName: 'shawn'
}

// 导出匿名函数
export default function(obj) {
	console.log(obj.firstName + obj.lastName);
}

对应的引入方式 import property from './file'，与引入export导出相比，这里不需要加大括号，也不需要变量名和导出相对应。

// 引入的变量名和导出的变量名不需要一致
import name from './main'
console.log(name);// wang

// 引入的是一个字面量对象
import name from './main'
console.log(name.firstName + name.lastName); // wangshawn

// 引入函数
import sayName from './main'
let name = {
    firstName: 'wang',
    lastName: 'shawn'
}
sayName(name); // wangshawn

需要注意的是

import name from './main'

仅仅是

import { default as name } from './main'

的语法糖。

总结：我觉得可以这样理解：export 将一个模块需要导出的对象导出，而default仅仅是该对象其中的一个属性。

export let name = 'wang';

let age = 24;
let school = 'ruc'
export { age, school };

export default function (m, n) {
	return m + n;
}

最终导出的对象是

{
	name: 'wang',
	age: 24,
	school: 'ruc',
	default: function (m, n) {
		return m + n;
	}
}

有了default这个默认属性，就可以在不知道导出模块中具体名称的情况下进行引入；

也为引入该默认属性设定了一种不需要大括号的简写方式。