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

#javascript

Всем привет.

Очень прошу помочь никак не могу понять различие между 

export default foo


И

 export { foo as default }


Какая между ними разница ?

Где и в каких случаях какую лучше использовать ?
    

Ответы

Ответ 1

Начну из отрывка книги Кайла Симпсона 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

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