JavaScript中'export'和'export default'的区别是什么？

Question

这两者之间到底有什么区别？我看到有人使用：

function foo () {
  ...
}

export default foo;

而我看到了：

function bar () {
  ...
}

export bar;

另外，为什么你会使用其中一个而不是另一个？

- user818700

---

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export - Ouroborus

Answer 1

最简单的方法就是查看三种不同的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');

（实际编译器输出可能有所不同）

- Jesse

Answer 2

如果您需要导出多个对象，请使用具有命名导出的方式（不使用 default 关键字）。

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';

- sanket

---

这与default关键字没有任何关系。 - ieXcept

同意@ieXcept的观点。 "default"关键字与多重导出无关，它涉及到具名和匿名导出。 - user723505

默认导出仍然是一种命名导出，它被导出为 default 名称。 - demisx