ES6 module export和export default区别

ES6 module 提供了两种导出模块的方式： export和export default

export

使用export可以导出一个或多个变量，函数或者类

// moduleA.js
var name = 1;
var info = {
  color: 'red',
  hobby: 'basketball'
}
const changeName = (a) => { name = a };

function changeInfo() {
  info.color = 'blue';
}

export {
  name,
  info,
  changeInfo,
  changeName,
}

// 或者定义时导出
export var name = 1;

// moduleB.js
import * as person from './moduleA.js';

console.log(person.name);
person.changeName(3);
console.log(person.name)
// 打印person对象
console.log(person)

通过控制台，可以看到person是一个module对象，其中包含了通过export导出的内容

export default

使用export default可以导出一个变量，函数或者类，export default是模块的默认导出接口

// moduleA.js
var name = 1;
var info = {
  color: 'red',
  hobby: 'basketball'
}
const changeName = (a) => { name = a };

function changeInfo() {
  info.color = 'blue';
}

export default {
  name,
  info,
  changeInfo,
  changeName,
}

// 或者定义时导出
export default name;

// moduleB.js
import * as person from './moduleA.js';
import person from './moduleA.js';

// 打印person对象
console.log(person)

使用import * as person from './moduleA.js';导入模块A时，可以看到person是一个module对象，其中包含了default属性，通过export default导出的内容都被绑定到了default属性上

直接使用import person from './moduleA.js';导入模块A时，可以看到person就是通过export default导出的内容