本文学习来源:ES6中export default 命令的详解(引用)
如有错误请及时指正,谢谢~
1. export加default和不加的区别
// aaa.js: 有default
export default function crc32(){
...
}
// bbb.js:
import crc32 from './aaa.js' // 导入
// ccc.js: 没有default
export function crc32(){
...
}
// ddd.js:
import {crc32} from './ccc.js' // 没有default,需要加大括号才能导入
2. export default的含义
export default 就是把default 后面的变量赋值给default这个变量,然后将default这个变量暴露出去,等别的模块import的时候系统允许你为它取任意名字。export default在一个文件中只能有一个
export var a = 1; // 语法正确
var a = 1;
export default a; // 语法正确
export default 42; // 语法正确
// 上面两种写法是将变量a的的值赋值给变量default。
export default var a = 1; // 语法错误,因为是要将default后面的值赋值给default,default后面应该直接写值或变量;
export 42; // 语法错误,因为export后面没有指定对外暴露的变量。
3. 同时导入多个变量
如果想在一条import语句中同时导入多个变量或方法,可以写成以下形式:
// lodash.js中的内容:
export default function(){...}
export function each(){...}
export { each as forEach }
// 其他文件导入使用:
import __,{ each, each as forEach } from 'lodash'
4. 导入类
使用export default暴露和导入类
// a.js
export default class{
...
}
// b.js
import MyClass from 'a';
let myclass = new MyClass();
Q.E.D.