Какая разница между `export default foo` и `export { foo as default }`?

Начну из отрывка книги Кайла Симпсона ES6 & Не только.

Давайте сравним два фрагмента

function foo(..){
   // . .
}
export default foo;

Второй:

function foo(..){
   // . .
}
export {foo as default}

В первом случае вы экспортируете привязку в значение функционального выражения, а не идентификатор foo.Другими словами,export default .. преобразовывает выражение.Если позднее присвоить функцию fooдругому значению внутри модуля, процедура импорта все равно будет показывать изначально экспортированную функцию.

Вернемся ко второму фрагменту:

function foo(..){
   //..
}
export {foo as default}

Здесь привязка экспорта по умолчанию на самом деле к идентификатору foo , а не к его значению ,то есть вы получаете ранее описанное поведение (в частности, если позднее вы поменяете значение foo, обновитсья и значение на стороне импорта).

Будьте крайне осторожны с этим небольшим подводным камнем в синтаксисие экспорта по умолчанию ,особенно если логическая схема требует обновлять экспортируемые значение.Если вы не планируете этого делать,прекрасно подойдет вариант export default ...В противном случае следует пользоватсья вариантом export {..as default}.И не забудьте снабдить ваш код комментариями,поясняющими ваши намерения!

Если этот отрывок не понятно приведу пример с кодом из песочницы тогда все будет яснее.

У нас есть 3 JS файла

another.js

export const bla = 5;
export * from "./sub";

sub.js

export const bla = 3,
  foo = 4;

index.js (основной)

import * as another from "./another";

В таком случае если мы напишем то получем следующее

console.log(another);  // { bla: 5, foo: 4 }

Переменная bla присвоилось новое значение с 3 на 5 внутри another.js.

Но если написать вот так внутри another.js

export const bla = 5;
export * from "./sub";
export { bla as default } from "./sub";

То уже будет три значение третий который default и который нельзя потом изменить внутри основного файла

console.log(another);  // {bla: 5, default: 3, foo: 4}

Если внутри index.js мы попытаемся сделать вот так

import * as another from "./another";
console.log(another); //  {default: 3, bla: 80, foo: 4}
another.bla = 80;

Все будет работать

Но если попытаемся изменить default то будет ошибка

import * as another from "./another";
another.default= 80;

TypeError: Cannot set property default of # which has only a getter

Вот тут можете все потестировать