Javascript (ES6), экспорт const vs экспорт по умолчанию

Question

Javascript (ES6), экспорт const vs экспорт по умолчанию

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

import myItem from 'myItem';

и с помощью export const Я могу сделать:

import { myItem } from 'myItem';

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

784 6

javascript ecmascript-6

6 ответов:

Comments

Ничего не найдено.

David Sherret · Accepted Answer · 2018-06-10 19:35:38

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

Экспорт По Умолчанию (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 * as MyClasses from "./MyClass";
// use MyClasses.MyClass and MyClass.MyOtherClass here
вы можете использовать экспорт по умолчанию или именованный экспорт или оба одновременно. Синтаксис поддерживает экспорт по умолчанию как немного более сжатый, потому что их вариант использования более распространен (посмотреть здесь).

обратите внимание, что экспорт по умолчанию на самом деле именованный экспорт с именем default таким образом, вы можете импортировать его:
import { default as MyDefaultExport } from "./MyFileWithADefaultExport";

James Sumners · Accepted Answer · 2015-11-09 17:00:07

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

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

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

vsync · Accepted Answer · 2018-08-13 10:58:55

default можно использовать только после в модуль.

вариант использования для этого позволяет экспортировать аноним

Philipp Sumi · Accepted Answer · 2017-12-10 12:22:46

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

Допустим у вас есть класс 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'
особенно в машинописи, я действительно оцените именованный экспорт и более надежный рефакторинг. Разница только в отсутствии 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'

Abdullah Danyal · Accepted Answer · 2018-02-22 14:58:49

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

Marcel Zebrowski · Accepted Answer · 2018-09-14 20:23:28

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

у меня есть исправить это с:
 <script type="module" src="index.js"></script>
модуль type сообщает браузеру использовать ES6.
export const bla = [1,2,3];

import {bla} from './example.js';
тогда это должно работать.