Ответ 1

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

Подчеркнем: здесь важно ключевое слово export, так как 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

Notes

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

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

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

Ответ 2

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

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

Пример:

Экспортируйте 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
   

Ответ 3

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

Скажем, у вас есть класс Foo, как это, с соответствующим импортом:

export default class Foo { }

//the name 'Foo' could be anything, since it 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 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'

Ответ 4

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

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

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

Ответ 5

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

Ответ 6

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

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

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

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

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

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

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