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

Файл: 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что может быть легче понять?

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

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

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

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

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

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

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

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

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

Я пишу этот пост, потому что (я полагаю, я устал), я не совсем понял ни 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

Как объяснено на этой странице 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

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

если есть файл 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

Существует два различных типа экспорта: именованные и стандартные . Вы можете иметь несколько именованных экспортов на модуль, но только один экспорт по умолчанию. Каждый тип соответствует одному из вышеперечисленных. Источник: 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.

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

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

читать далее