Я пытаюсь определить, есть ли какие-то большие различия между этими двумя, кроме возможности импортировать export default
, просто выполнив:
import myItem from 'myItem';
И используя export const
я могу сделать:
import { myItem } from 'myItem';
Мне интересно, есть ли какие-либо различия и / или варианты использования, кроме этого.
javascript
ecmascript-6
es6-modules
ajmajmajma
источник
источник
const
сделает идентификатор доступным только для чтения. Так что в случае примитивных ценностей, вы можете считать это неизменным. Обратите внимание, что само значение не является неизменным, поэтому объекты, массивы и т. Д. Могут быть изменены, но не переназначены.const
.Ответы:
Это именованный экспорт против экспорта по умолчанию.
export const
именованный экспорт, который экспортирует декларацию или декларации const.Подчеркнем: здесь важно
export
ключевое слово asconst
, используемое для объявления объявления или объявлений const.export
может также применяться к другим объявлениям, таким как объявления класса или функции.Экспорт по умолчанию (
export default
)Вы можете иметь один экспорт по умолчанию для каждого файла. При импорте вы должны указать имя и импортировать так:
Вы можете дать этому любое имя, которое вам нравится.
Именованный экспорт (
export
)С именованным экспортом вы можете иметь несколько именованных экспортов на файл. Затем импортируйте нужный экспорт в фигурные скобки:
Или можно использовать значение по умолчанию вместе с именованным импортом в том же операторе:
Импорт пространства имен
Также возможно импортировать все из файла на объекте:
Ноты
Экспорт по умолчанию - это именованный экспорт с именем,
default
так что вы можете импортировать его с именованным импортом:источник
export default
влияет на синтаксис при импорте экспортированной «вещи», когда разрешается импортировать все, что было экспортировано, путем выбора имени вimport
самом имени, независимо от того, какое имя имело место при экспорте, просто потому, что оно помечено как «по умолчанию».Полезный вариант использования, который мне нравится (и я использую), позволяет экспортировать анонимную функцию без явного указания ее имени, и только когда эта функция импортируется, ей должно быть присвоено имя:
Пример:
Экспорт 2 функции, одна из них
default
:Импортируйте вышеупомянутые функции. Составление имени для
default
одного:Когда
{}
синтаксис используется для импорта функции (или переменной), это означает, что все импортированное уже было имя названо при экспорте, поэтому необходимо импортировать его с точно таким же именем, иначе импорт не будет работать.Ошибочные примеры:
Функция по умолчанию должна быть первой для импорта
divide_1
не был экспортирован вmodule_1.js
, таким образом, ничего не будет импортированоsquare
не был экспортирован вmodule_1.js
, потому что{}
говорит движку явно искать только именованные экспорты.источник
import something from
вместоimport { somethingNamed } from
.Небольшое примечание: учтите, что при импорте из экспорта по умолчанию наименование является полностью независимым. Это на самом деле влияет на рефакторинги.
Допустим, у вас есть такой класс
Foo
с соответствующим импортом:Теперь, если вы реорганизуете свой
Foo
классBar
и переименовываете файл, большинство IDE НЕ коснется вашего импорта. Итак, вы закончите с этим:Особенно в Typescript я очень ценю именной экспорт и более надежный рефакторинг. Разница лишь в отсутствии
default
ключевого слова и фигурных скобок. Это, кстати, также не позволяет вам сделать опечатку в вашем импорте, так как у вас есть проверка типов сейчас.источник
import { Foo as Anything } from …
как иimport Anything from …
экспорт по умолчанию.as
на самом деле не имеет значения в этом исходном комментарии. Спасибо за отрицание; pexport default
для экспорта основной объект проекта, в частности из пакетов npm (он заменяет amodule.exports =
). Но внутри проекта лучше использовать только именованные экспорты.Из документации :
источник
Когда вы ставите default, это называется экспорт по умолчанию. Вы можете иметь только один экспорт по умолчанию для каждого файла и можете импортировать его в другой файл с любым именем. Если вы не укажете default, он называется named export, вам придется импортировать его в другой файл, используя то же имя с фигурными скобками внутри.
источник
У меня была проблема, что браузер не использует es6.
Я исправил это с помощью:
Модуль type указывает браузеру использовать ES6.
Тогда это должно работать.
источник