Что такое «экспорт по умолчанию» в javascript?

570

Файл: SafeString.js

// Build out our basic SafeString type
function SafeString(string) {
  this.string = string;
}

SafeString.prototype.toString = function() {
  return "" + this.string;
};

export default SafeString;

Я никогда не видел export defaultраньше. Есть ли что-то подобное, export defaultчто может быть легче понять?

damphat
источник
29
Это очень четкое объяснение этого 24ways.org/2014/javascript-modules-the-es6-way
nish1013
2
exportДетали ключевого слова здесь . В настоящее время он не поддерживается ни одним из веб-браузеров.
RBT
3
Теперь он поддерживается во всех браузерах, кроме IE.
Брайан Ди Пальма
1
Очень хороший ответ stackoverflow.com/a/36426988/5473170
Сурадж Джейн
Вот, посмотрите ^ выше для ответов; смотрите \ / ниже на путаницу. Я показал тебе да вай
Эндрю

Ответы:

456

Это часть модульной системы ES6, описанной здесь . В этой документации также есть полезный пример:

Если модуль определяет экспорт по умолчанию:

export default function() { console.log("hello!") }

затем вы можете импортировать этот экспорт по умолчанию, пропустив фигурные скобки:

import foo from "foo";
foo(); // hello!

Обновление: по состоянию на июнь 2015 года система модулей определена в §15.2, а exportсинтаксис, в частности, определен в §15.2.3 спецификации ECMAScript 2015.

PSWG
источник
1
@GeenHenk Полагаю, этого следовало ожидать, поскольку ES6 все еще является черновиком. Я предоставил обновленную ссылку и отказ от ответственности.
PSWG
7
Я не вижу, чем функция экспорта по умолчанию () {} отличается от export = function () {} ....
Александр Миллс
1
как насчет случаев, когда это похоже, export const Foo = () => {}а затем в конце файла export default Fooя вижу это в куче примеров реакции. Что с двумя экспортами?
FlavorScape
Было бы неплохо увидеть пример с экспортом по умолчанию и именованным экспортом. Другими словами, такой экспорт, который бы удовлетворилimport foo, { bar, baz } from './foo';
gumkins
1
Спасибо за ответ, но использование foo во втором примере немного неоднозначно; что такое foo и как вы назвали первый файл; как получилось import foo from "foo"? Был ли объект, который содержал foo, так как в первом примере ваша экспортируемая функция не названа. @pswg
nosahama
159

export default используется для экспорта одного класса, функции или примитива из файла сценария.

Экспорт также может быть записан как

export default function SafeString(string) {
  this.string = string;
}

SafeString.prototype.toString = function() {
  return "" + this.string;
};

Это используется для импорта этой функции в другой файл скрипта

Сказать в app.js , вы можете

import SafeString from './handlebars/safe-string';

Немного об экспорте

Как следует из названия, он используется для экспорта функций, объектов, классов или выражений из файлов скриптов или модулей.

Utiliites.js

export function cube(x) {
  return x * x * x;
}
export const foo = Math.PI + Math.SQRT2;

Это можно импортировать и использовать как

App.js

import { cube, foo } from 'Utilities';
console.log(cube(3)); // 27
console.log(foo);    // 4.555806215962888

Или

import * as utilities from 'Utilities';
console.log(utilities.cube(3)); // 27
console.log(utilities.foo);    // 4.555806215962888

Когда используется экспорт по умолчанию, это намного проще. Файлы сценариев просто экспортируют одну вещь. cube.js

export default function cube(x) {
  return x * x * x;
};

и используется как App.js

import Cube from 'cube';
console.log(Cube(3)); // 27
Судо Бэнгбэнг
источник
78

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

Эта страница подробно export defaultописывает, а также другие подробности о модулях, которые я нашел очень полезными.

Грег Гам
источник
14
Вы можете использовать экспорт по умолчанию и именованные вместе, если хотите.
Берги
@ Greg gum страница устарела. Он перенаправляет на exploringjs.com/es6/ch_modules.html
rajakvk
@rajakvk, правда, но на исходной странице гораздо больше справочной информации для начинающих.
Грег Гам
7
Этот ответ лучше принятого, потому что он объясняет, что defaultзначит, и для меня вопрос был об этом слове.
Дариуш Сикорски
1
@DariuszSikorski принятый ответ объясняет, что defaultозначает, что экспорт по умолчанию может быть импортирован без использования фигурных скобок. Этот ответ на самом деле довольно неправильный, так как он говорит, что вы можете использовать defaultего только в том случае, если в файле есть только один экспорт, что вовсе не соответствует действительности. Вы можете иметь несколько экспортов в одном файле, но, конечно, только один из них может быть установлен как defaultодин.
realUser404
43

Я пишу этот пост, потому что (я полагаю, я устал), я не совсем понял ни MDN, ни описание других людей, и лучший способ понять что-то - это научить этому других людей. Просто я не вижу простого ответа на вопрос.

Что такое «экспорт по умолчанию» в javascript?

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

Я проиллюстрирую эту строку на простом примере.

Допустим, у нас есть 3 модуля и index.html:

  • modul.js
  • modul2.js
  • modul3.js
  • index.html

modul.js

export function hello() {
    console.log("Modul: Saying hello!");
}

export let variable = 123;

modul2.js

export function hello2() {
    console.log("Module2: Saying hello for the second time!");
}

export let variable2 = 456;

modul3.js

export default function hello3() {
    console.log("Module3: Saying hello for the third time!");
}

index.html

<script type="module">
import * as mod from './modul.js';
import {hello2, variable2} from './modul2.js';
import blabla from './modul3.js'; //! Here is the important stuff - we name the variable for the module as we like

mod.hello();
console.log("Module: " + mod.variable);

hello2();
console.log("Module2: " + variable2);

blabla();
</script>

Выход:

modul.js:2:10   -> Modul: Saying hello! 
index.html:7:9  -> Module: 123 
modul2.js:2:10  -> Module2: Saying hello for the second time! 
index.html:10:9 -> Module2: 456 
modul3.js:2:10  -> Module3: Saying hello for the third time!

Итак, более длинное объяснение :

«экспорт по умолчанию» используется, если вы хотите экспортировать одну вещь для модуля.

Таким образом, важно то, что вы импортируете blabla из './modul3.js' - вместо этого мы можем сказать:

"импортировать pamelanderson из './modul3.js", а затем pamelanderson (); Это будет прекрасно работать, когда мы используем «экспорт по умолчанию», и в основном это так - он позволяет нам называть его как угодно, когда он используется по умолчанию .


Ps Если вы хотите протестировать пример - сначала создайте файлы, затем разрешите CORS в браузере -> если вы используете тип firefox в URL браузера: about: config -> Search for "privacy.file_unique_origin" -> change в «false» -> открыть index.html -> нажмите F12, чтобы открыть консоль и увидеть вывод -> Наслаждайтесь и не забудьте вернуть настройки cors по умолчанию.

Ps2 извините за глупые переменные именования

Больше информации @ link2medium , link2mdn1 , link2mdn2

скомбинировать
источник
4
Это должно быть принято как лучший ответ, но я сделал все, что мог, используя свой голос.
Джармос
1
Большое спасибо!
Объединить
1
Это должен быть принятый ответ с поднятыми руками
nosahama
16

Как объяснено на этой странице MDN

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

Например:

let myVar; export default myVar = 123; // in file my-module.js

import myExportedVar from './my-module' //  we have the freedom to use 'import myExportedVar' instead of 'import myVar' because myVar was defined as default export

console.log(myExportedVar);        // will log 123
manfall19
источник
6

По моему мнению, важен экспорт по умолчанию, который МОЖЕТ быть импортирован с ЛЮБОМ именем!

если есть файл foo.js, который экспортирует по умолчанию:

export default function foo(){}

его можно импортировать в bar.js используя:

import bar from 'foo'
import Bar from 'foo' //or ANY other name you wish to assign to this import

Паулс Бебрис
источник
1

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

Именованный Экспорт

export class NamedExport1 { }

export class NamedExport2 { }

// import class
import { NamedExport1 } from 'path-to-file'
import { NamedExport2 } from 'path-to-file'

// OR you can import all at once
import * as namedExports from 'path-to-file'

Экспорт по умолчанию

export default class DefaultExport1 { }

// import class
import DefaultExport1 from 'path-to-file' // no curly braces {}

// вы можете использовать другое имя для импорта по умолчанию

import Foo from 'path-to-file' // this will assign any default export to Foo.
Виктор
источник
-3

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

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

читать далее

Viju
источник