export与export default

最近在写SDK的时候需要迁移一个功能从原生的JS单文件的形式切换到webpack的module的形式,所以遇到了一个迁移过程中使用export与export default的小区别。

引言

首先JS在ES6之前一直都没有模块的体系,但在ES6中JS本身支持了模块的功能。

export

模块的构成主要由两个命令构成: exportimport
export 用于输出变量, import 用于引入变量

栗子:

1
2
3
var test = '111';
var data = '222';
export {test, data};

上面的代码就是直接使用export导出变量, 同样的可以直接导出函数,或者:

1
export const test = '111'

在使用export导出的变量在使用import引入的时候必须加上{}! 且重复的使用import引入同一个对象的时候只会执行一次。

export default

export default 为模块指定了一个默认输出.以便于其他的任意模块在加载他的时候可以为该匿名变量指定任意名字。

export default 命令其实是输出了一个叫default的变量,所以在后面不能再继续声明

1
2
export const test = '111';           // 正确
export default const test = '111'; // 错误

因为export default 本甚至上是将后面的值赋值给default变量。所以第二种会报错。

hi you can see me