ES6语法 --- export 与 export default 共同点与区别

export 与export default

共同点：

• 均属于ES6语法，均可用于导出产量、函数、文件、模块等
• 在其他文件或模块中通过import + (XXX)名方式导入

1.1 export

• 在一个文件/模块中，可以使用多次export 、import
• 导入时，需要使用{ }，引入对应的方法，不可更改名称 — 可单独导出或多个导出
• export 可以直接导出或者先定义后导出都可以

// export 导出方式 -- export.js
// 直接导出
export const STRING = 'YUEBAI'
export function getString() return something
// 先定义后导出
const const STRING = 'YUEBAI'
function getString(A,B) return A*B
export {STRING} // 单独导出
export {STRING,getString} // 多个导出

// 导入方式 -- import.js
// 引入需要加{ } ,可分开可同时,且不可更改变量名

import { STRING, getString} from './export.js';  // 完整的路径
console.log(STRING); // YUEBAI
console.log(getString(1,5)); // 
本质：
导出 编译成 CommonJS: exports.STRING  = STRING 
导入 编译成 CommonJS: require('./export').STRING  

1.2 export default

• 在一个文件/模块中，只可以使用一次export default

  reason ： export default 用于规定模块的默认对外接口 , 只能有一个

• 导入时，直接引入方法名，可更改名称

• 只能先定义后导出

// export default导出方式 export.js
//  只能先定义后导出
const STRING = 'YUEBAI'
// 编译成 CommonJS: exports.default = STRING (ES 编译成的 CommonJS 形式)
export default STRING 
 
// 对应的导入方式：
// two.js
// 1、引入时不需要加花括号{ }；
// 2、引入的变量可以自定义名字
// 编译成 CommonJS: require('./export.js').default
import STRING from './export.js'; // 完整的路径
console.log(STRING ); // YUEBAI

参考资料：
https://blog.csdn.net/sunyctf/article/details/127675000