Я пытаюсь определить, есть ли какие-то большие различия между этими двумя, кроме возможности импортировать export default, просто выполнив:

import myItem from 'myItem';

И используя export constя могу сделать:

import { myItem } from 'myItem';

Мне интересно, есть ли какие-либо различия и / или варианты использования, кроме этого.

Это именованный экспорт против экспорта по умолчанию. export constименованный экспорт, который экспортирует декларацию или декларации const.

Подчеркнем: здесь важно exportключевое слово as const, используемое для объявления объявления или объявлений const. exportможет также применяться к другим объявлениям, таким как объявления класса или функции.

Экспорт по умолчанию ( export default)

Вы можете иметь один экспорт по умолчанию для каждого файла. При импорте вы должны указать имя и импортировать так:

import MyDefaultExport from "./MyFileWithADefaultExport";

Вы можете дать этому любое имя, которое вам нравится.

Именованный экспорт ( export)

С именованным экспортом вы можете иметь несколько именованных экспортов на файл. Затем импортируйте нужный экспорт в фигурные скобки:

// ex. importing multiple exports:
import { MyClass, MyOtherClass } from "./MyClass";
// ex. giving a named import a different name by using "as":
import { MyClass2 as MyClass2Alias } from "./MyClass2";

// use MyClass, MyOtherClass, and MyClass2Alias here

Или можно использовать значение по умолчанию вместе с именованным импортом в том же операторе:

import MyDefaultExport, { MyClass, MyOtherClass} from "./MyClass";

Импорт пространства имен

Также возможно импортировать все из файла на объекте:

import * as MyClasses from "./MyClass";
// use MyClasses.MyClass, MyClasses.MyOtherClass and MyClasses.default here

Ноты

• Синтаксис предпочитает экспорт по умолчанию как несколько более краткий, потому что их вариант использования более распространен ( см. Обсуждение здесь ).

• Экспорт по умолчанию - это именованный экспорт с именем, defaultтак что вы можете импортировать его с именованным импортом:

  import { default as MyDefaultExport } from "./MyFileWithADefaultExport";

export defaultвлияет на синтаксис при импорте экспортированной «вещи», когда разрешается импортировать все, что было экспортировано, путем выбора имени в importсамом имени, независимо от того, какое имя имело место при экспорте, просто потому, что оно помечено как «по умолчанию».

Полезный вариант использования, который мне нравится (и я использую), позволяет экспортировать анонимную функцию без явного указания ее имени, и только когда эта функция импортируется, ей должно быть присвоено имя:

Пример:

Экспорт 2 функции, одна из них default:

export function divide( x ){
    return x / 2;
}

// only one 'default' function may be exported and the rest (above) must be named
export default function( x ){  // <---- declared as a default function
    return x * x;
}

Импортируйте вышеупомянутые функции. Составление имени дляdefault одного:

// The default function should be the first to import (and named whatever)
import square, {divide} from './module_1.js'; // I named the default "square" 

console.log( square(2), divide(2) ); // 4, 1

Когда {}синтаксис используется для импорта функции (или переменной), это означает, что все импортированное уже было имя названо при экспорте, поэтому необходимо импортировать его с точно таким же именем, иначе импорт не будет работать.

Ошибочные примеры:

1. Функция по умолчанию должна быть первой для импорта

   import {divide}, square from './module_1.js

2. divide_1не был экспортирован в module_1.js, таким образом, ничего не будет импортировано

   import {divide_1} from './module_1.js

3. squareне был экспортирован в module_1.js, потому что {}говорит движку явно искать только именованные экспорты.

   import {square} from './module_1.js

Небольшое примечание: учтите, что при импорте из экспорта по умолчанию наименование является полностью независимым. Это на самом деле влияет на рефакторинги.

Допустим, у вас есть такой класс Fooс соответствующим импортом:

export default class Foo { }

//the name 'Foo' could be anything, since it's just an
//identifier for the default export
import Foo from './Foo'

Теперь, если вы реорганизуете свой Fooкласс Barи переименовываете файл, большинство IDE НЕ коснется вашего импорта. Итак, вы закончите с этим:

export default class Bar { }

//the name 'Foo' could be anything, since it's just an
//identifier for the default export.
import Foo from './Bar'

Особенно в Typescript я очень ценю именной экспорт и более надежный рефакторинг. Разница лишь в отсутствии defaultключевого слова и фигурных скобок. Это, кстати, также не позволяет вам сделать опечатку в вашем импорте, так как у вас есть проверка типов сейчас.

export class Foo { }

//'Foo' needs to be the class name. The import will be refactored
//in case of a rename!
import { Foo } from './Foo'

Из документации :

Именованные экспорты полезны для экспорта нескольких значений. Во время импорта можно использовать одно и то же имя для ссылки на соответствующее значение.

Что касается экспорта по умолчанию, существует только один экспорт по умолчанию на модуль. Экспорт по умолчанию может быть функцией, классом, объектом или чем-то еще. Это значение следует рассматривать как «основное» экспортируемое значение, поскольку его будет проще всего импортировать.

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

У меня была проблема, что браузер не использует es6.

Я исправил это с помощью:

 <script type="module" src="index.js"></script>

Модуль type указывает браузеру использовать ES6.

export const bla = [1,2,3];

import {bla} from './example.js';

Тогда это должно работать.