- export default позволяет экспортировать анонимные функции:
Если где-либо будет выброшена ошибка, в ее stack trace все анонимные функции, через которые она прошла, будут помечены записью at <anonymous>, что усложнит поиск места возникновения данной ошибки.
В React, если таким способом экспортировать компонент, он не получит имени в дереве компонентов в React DevTools, следовательно будет сложнее увидеть полную картину и понять, с каким компонентом мы имеем дело.
Также, такое содержимое мы не сможем найти через поиск по коду в IDE, так как оно попросту не присвоено ни в какую переменную (на уровне исходного кода), а следовательно не имеет имени.
Обычно авто-импорты в редакторах/IDE предлагают импортировать такие функции по имени файла.
Например, для импорта значения дефолтного экспорта из файла some-thing.ts будет предложено имя someThing для функции и SomeThing для класса.
Тем не менее, при переименовании такого файла, имя у существующих импортов заменено не будет, при этом для следующих импортов будет предложено уже новое имя в соответствии с новым именем файла.
Таким незаметным образом в коде могут появиться импорты одного и того же значения под разными именами, и возникнет ситуация, описанная в следующем пункте.
- Импорт такого значения беспрепятственно позволяет указать ему любое имя:
/* component.js */
const Component = () => { ... }
export default Component/* other-file.js */
import MyComponent from 'component.js'
import OtherComponent from 'component.js' // или так?
import Something from 'component.js' // а может даже так?Это усиливает влияние человеческого фактора на код, особенно когда у кого-нибудь из разработчиков по какой-то причине нет авто-импорта в редакторе/IDE. Кто-угодно сможет легко импортировать содержимое под другим именем, что сильно усложнит поиск мест, в которых это содержимое используется.
При использовании именованного экспорта, в любом случае придется указать изначальное имя переменной. Даже если надо импортировать ее под другим именем:
import { Component as Something } from 'component.js'-
Экспорт основного содержимого библиотеки. (например, чтобы можно было сделать так:
import React from 'react') -
Некоторые модули, которые в соответствии с архитектурой фреймворка должны быть экспортированы по умолчанию. (например, страницы в Next.js)
-
Различные конфиги и все остальное, чьими потребителями является программный код, а не разработчики.
-
Google в своем стайлгайде предлагает использовать именованные экспорты: https://google.github.io/styleguide/jsguide.html#es-module-exports
-
В Gitlab собираются уходить от дефолтных экспортов: https://gitlab.com/gitlab-org/frontend/rfcs/issues/20