ES6语法之export default与export区别

ES6 模块化规范是浏览器端与服务器端通用的模块化开发规范。它的出现极大的降低了前端开发者的模块化学习成本，开发者不需再额外学习 AMD、CMD 或 CommonJS 等模块化规范。

1、ES6 模块化规范中定义

1）每个 js 文件都是一个独立的模块

2）导入其它模块成员使用 import 关键字

3）向外共享模块成员使用 export 关键字

2、ES6 的模块化主要包含以下 3 种用法

1） 默认导出与默认导入

默认导出的语法：export default 默认导出的成员

//a.js
let sex = "boy";
// 编译成 CommonJS: exports.default = sex (ES 编译成的 CommonJS 形式)
export default sex // sex不能加大括号

默认导入的语法： import 接收名称 from '模块标识符'

// b.js
import any from "./a.js"; // 编译成 CommonJS: require('./a.js').default
import any12 from "./a.js"; // 编译成 CommonJS: require('./a.js').default
console.log(any,any12)   // boy  boy

2）按需导出与按需导入

按需导出的语法： export 按需导出的成员

//直接导出
export let i = “hello”；
export function myFun(){ };

//先定义后导出
let i = “hello";
function myFun(){ };
export { i , myFun }   // 必须加花括号{ }

按需导入的语法： import { s1 } from '模块标识符'

import {i as hello,say} from './a.js'
console.log(hello)  //hello

注意：

• 每个模块中可以使用多次按需导出
• 按需导入的成员名称必须和按需导出的名称保持一致
• 按需导入时，可以使用 as 关键字进行重命名
• 按需导入可以和默认导入一起使用

3） 直接导入并执行模块中的代码

如果只想单纯地执行某个模块中的代码，并不需要得到模块中向外共享的成员。此时，可以直接导入并执行模块代码，示例代码如下：

import '/modules/my-module.js'; // 不引入变量，但执行其中全局代码

3、总结

1）export与export default均可用于导出常量、函数、文件、模块等

2）你可以在其它文件或模块中通过import+(常量 | 函数 | 文件 | 模块)名的方式，将其导入，以便能够对其进行使用

3）在一个文件或模块中，export、import可以有多个，export default仅有一个

4）export 暴露的是一个接口，必须加上 大括号 {}，export default 暴露的是一个变量，在 import 时可以使用任意变量名导入，不用加大括号 {}