ES6之 export与export default的区别

export：

• 使用export导出，可以导出常量 函数 文件 模块 对象 类
• 在使用import引入的时候，需要加 {}才能正常引入
• export不能直接导出一个 变量 或者具体的一个 值 ，它导出的是一个 表达式 或者 语句 或者直接导出 {}
  • 错误写法
  • let str='ascv'; export str;
  • function fn() {}; export fn;
  • 正确写法
  • export let str = 'ascv';
  • export function fn() {};
  • export {str, arr ...}

暴露函数和变量

// a.js中定义
// export暴露方法一：直接暴露出去
export var str = 'xxx';
export function fn() {
  console.log('暴露函数');
}


// export暴露方法二：集中暴露
var str = 'yyyyy';
function ff() {};
export {str, ff}; // import导入方法不变



// 在b.js文件中导入

import {str, fn} from 'a'; // ⚠️：不加.js这个后缀
// str as s 表示用s这个变量来替换掉str这个变量,他们之间的关系是 str === s（全等）
import {str as s, fn as f} from 'a';
// 调用函数时
fn() / f() // 这两种写法都可以

暴露对象

// a.js
let obj = {}
let arr = []
export {obj, arr};

// b.js
import {obj, arr} from 'a'; // 变量名要相同

暴露class

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

/*
* 这种暴露方式是错的
* class Test{}
* export Test;
*/

// b.js
import { Test } from 'a.js'

export default:

• 在用法上跟export导出几乎一致，没有什么区别，导出class的时候需要注意一下

• 一个模块只能导出 一次，可以是常量 函数 文件 **模块 ** 对象 类

• 在使用import引入的时候，不需要加{},可以直接用 任意 变量接收

导出class

// a.js
// 方法一
export default class Test2{
  constructor() {}
}
// 方法二：
class Test1{...}
export default Test1;


// b.js
import TT from 'a';

注意区分：

export / export default 是属于 ES6 的模块规范

module.exports / exports 是属于 CommonJs 的模块规范