出口'之间的区别和'导出默认'在JavaScript?

时间:2017-02-27 05:51:28

标签: javascript ecmascript-6

这两者究竟有什么区别?我见过人们使用:

function foo () {
  ...
}

export default foo;

而且我已经看到了:

function bar () {
  ...
}

export bar;

另外,你为什么要使用另一个呢?

2 个答案:

答案 0 :(得分:87)

最简单的方法是查看三种不同的ES6导入/导出样式在CommonJS中编译的内容。

// Three different export styles
export foo;
export default foo;
export = foo;

// The three matching import styles
import {foo} from 'blah';
import foo from 'blah';
import * as foo from 'blah';

大致编译:

exports.foo = foo;
exports['default'] = foo;
module.exports = foo;

var foo = require('blah').foo;
var foo = require('blah')['default'];
var foo = require('blah');

(实际编译器输出可能不同)

答案 1 :(得分:20)

如果您需要导出多个对象,请使用命名导出(不带默认关键字)。

function x1(){};
function x2(){};
export {x1},{x2};  //my-module.js
import {x1},{x2} from 'my-module';

否则对于单个导出,默认导出效果很好

export default function x1() {};
import x1 from 'my-module';