it-roy-ru.com

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

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

import myItem from 'myItem';

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

import { myItem } from 'myItem';

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

142
ajmajmajma

Это именованный экспорт против экспорта по умолчанию. 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";
238
David Sherret

export default влияет на способ синтаксис импорта, который следует использовать при импорте модуля.

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


Пример:

module_1

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;
}

module_2

// 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, потому что {} указывает движку на явный поиск только named экспорта.

    import {square} from './module_1.js
    
9
vsync

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

Допустим, у вас есть класс 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'
7
Philipp Sumi

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

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

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

5
James Sumners

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

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

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

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

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

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

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

0
Marcel Zebrowski

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

0
Abdullah Danyal