导入导出：export 和 export default 的区别

当声明和使用不在同一个文件中时，声明需要被导出，使用前需要导入

export：

1、写在声明前

// 导出数组
export let months = ['Jan', 'Feb', 'Mar','Apr', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']; //有分号

// 导出 const 声明的变量
export const MODULES_BECAME_STANDARD_YEAR = 2015; //有分号

// 导出类
export class User {
  constructor(name) {
    this.name = name;
  }
} // 在这里没有分号 ;
export function sayHi(user) {
  alert(`Hello, ${user}!`);
}  // 在这里没有分号 ;

2、以列表的形式导出

// 📁 say.js
function sayHi(user) {
  alert(`Hello, ${user}!`);
}

function sayBye(user) {
  alert(`Bye, ${user}!`);
}

export {sayHi, sayBye}; // 导出变量列表

匹配于export的导入：

1、按需导入：把要导入的东西列到花括号中

// 📁 main.js
import {sayHi, sayBye} from './say.js';

sayHi('John'); // Hello, John!
sayBye('John'); // Bye, John!

2、全部导入

// 📁 main.js
import * as say from './say.js';

say.sayHi('John');
say.sayBye('John');

export default:

用法和export一致

但是

1、一个文件只有一个export default ，一个文件中可以有多个export

2、因为一个文件只有一个export default，所以用export default导出可以不需要名称，export必须要名称

export default class { // 没有类名
  constructor() { ... }
}

export class { // Error!（非默认的导出需要名称）
  constructor() {}
}

3、因为一个文件只有一个export default，所以用export default对应的导入不需要花括号

// 📁 say.js
export default class User {
  constructor(name) {
    this.name = name;
  }
}

// 📁 main.js
import User from './say.js';