Разница между "экспортом" и "дефолтом экспорта" в JavaScript?

В чем же разница между этими двумя? Я видел, как люди используют:

function foo () {
  ...
}

export default foo;

И я видел:

function bar () {
  ...
}

export bar;

Кроме того, почему вы используете один над другим?

Ответ 1

Если вам нужно экспортировать несколько объектов, перейдите с именованным экспортом (без ключевого слова по умолчанию).

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

Ответ 2

Проще всего просто посмотреть, как скомпилировать три разных стиля импорта/экспорта 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');

(Фактический вывод компилятора может отличаться)