Che cos'è "export default" in javascript?

File: SafeString.js

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

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

export default SafeString;

Non l'ho mai visto export defaultprima Ci sono cose equivalenti export defaultche possono essere più facili da capire?

Fa parte del sistema di moduli ES6, descritto qui . C'è un utile esempio in quella documentazione, anche:

Se un modulo definisce un'esportazione predefinita:

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

quindi puoi importare quell'esportazione predefinita omettendo le parentesi graffe:

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

Aggiornamento: a partire da giugno 2015, il sistema di moduli è definito in §15.2 e la exportsintassi in particolare è definita in §15.2.3 della specifica ECMAScript 2015.

export default viene utilizzato per esportare una singola classe, funzione o primitiva da un file di script.

L'esportazione può anche essere scritta come

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

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

Viene utilizzato per importare questa funzione in un altro file di script

Dì in app.js , puoi

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

Un po 'di esportazione

Come dice il nome, viene utilizzato per esportare funzioni, oggetti, classi o espressioni da file di script o moduli

Utiliites.js

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

Questo può essere importato e usato come

App.js

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

O

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

Quando si utilizza l'esportazione predefinita, questo è molto più semplice. I file di script esportano solo una cosa. cube.js

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

e usato come App.js

import Cube from 'cube';
console.log(Cube(3)); // 27

export default function(){}può essere usato quando la funzione non ha nome. Può esserci solo un'esportazione predefinita in un file. L'alternativa è un'esportazione denominata.

Questa pagina descrive export defaultin dettaglio così come altri dettagli sui moduli che ho trovato molto utili.

Sto scrivendo questo post perché (suppongo di essere stanco) non ho capito bene né MDN, né la descrizione di altre persone e il modo migliore per capire qualcosa è insegnarlo ad altre persone. È solo che non vedo una semplice risposta alla domanda.

Che cos'è "export default" in javascript?

Nell'esportazione predefinita la denominazione dell'importazione è completamente indipendente e possiamo usare qualsiasi nome che ci piace.

Illustrerò questa riga con un semplice esempio.

Diciamo che abbiamo 3 moduli e un 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>

L'output è:

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!

Quindi la spiegazione più lunga è :

'export default' viene usato se si desidera esportare una singola cosa per un modulo.

Quindi la cosa importante è "import blabla da './modul3.js'" - potremmo invece dire:

"import pamelanderson da './modul3.js" e quindi pamelanderson (); Funzionerà perfettamente quando usiamo "export default" e sostanzialmente è così - ci permette di nominarlo come preferiamo quando è default .

Ps Se vuoi provare l'esempio - crea prima i file, quindi consenti CORS nel browser -> se stai usando il tipo firefox nell'URL del browser: about: config -> Cerca "privacy.file_unique_origin" -> cambia su "false" -> apri index.html -> premi F12 per aprire la console e vedere l'output -> Divertiti e non dimenticare di ripristinare le impostazioni cors predefinite.

Ps2 Ci scusiamo per la stupida denominazione delle variabili

Maggiori informazioni @ link2medium , link2mdn1 , link2mdn2

Come spiegato in questa pagina MDN

Esistono due diversi tipi di esportazione, denominati e predefiniti. È possibile avere più esportazioni denominate per modulo, ma solo un'esportazione predefinita [...] denominata è utile per esportare più valori. Durante l'importazione, è obbligatorio utilizzare lo stesso nome dell'oggetto corrispondente, ma un'esportazione predefinita può essere importata con qualsiasi nome

Per esempio:

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

A mio avviso, l' importante riguardo all'esportazione di default è che può essere importato con QUALSIASI nome!

se esiste un file foo.js che esporta predefinito:

export default function foo(){}

può essere importato in bar.js usando:

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

Esistono due diversi tipi di esportazione, denominati e predefiniti . Puoi avere più esportazioni denominate per modulo ma solo una esportazione predefinita. Ogni tipo corrisponde a uno dei precedenti. Fonte: MDN

Esportazione denominata

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'

Esportazione predefinita

export default class DefaultExport1 { }

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

// è possibile utilizzare un nome diverso per l'importazione predefinita

import Foo from 'path-to-file' // this will assign any default export to Foo.

export default è usato per esportare una singola classe, funzione o primitiva.

export default function () {} può essere usato quando la funzione non ha nome. Può esserci solo un'esportazione predefinita in un file.

leggi di più