Che cos'è "export default" in javascript?


570

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?


29
Questa è una spiegazione molto chiara su questo 24ways.org/2014/javascript-modules-the-es6-way
nish1013

2
exportdettagli delle parole chiave qui . Attualmente è non supportato nativamente da uno dei browser web.
RBT

3
Ora è supportato in tutti i browser tranne IE.
Brian Di Palma,


Ecco, cerca ^ sopra per le risposte; cerca \ / sotto per confusione. Ti ho mostrato da Wai
Andrew,

Risposte:


456

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.


1
@GeenHenk Suppongo che ci si possa aspettare dal momento che ES6 è ancora una bozza. Ho fornito un link aggiornato e una dichiarazione di non responsabilità.
pswg,

7
Non vedo come export default function () {} sia diverso da export = function () {} ....
Alexander Mills

1
che dire dei casi in cui è come export const Foo = () => {}e poi alla fine del file export default Foolo vedo in un mucchio di esempi di reazioni. Cosa sono le due esportazioni?
FlavorScape

Sarebbe bello vedere un esempio con esportazioni predefinite e denominate. In altre parole, tale esportazione che soddisferebbeimport foo, { bar, baz } from './foo';
Gumkins

1
Grazie per aver risposto, ma l'uso di foo nel secondo esempio è un po 'ambiguo; cos'è il foo e come hai chiamato il primo file; come mai puoi fare import foo from "foo"? Esisteva un oggetto che conteneva foo, poiché nel primo esempio la tua funzione esportata è senza nome. @pswg
nosahama

159

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

78

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.


14
Se lo desideri, puoi utilizzare insieme le esportazioni predefinite e denominate.
Bergi,

@Greg gum la pagina è obsoleta. Sta reindirizzando a exploringjs.com/es6/ch_modules.html
rajakvk

@rajakvk, True, ma la pagina originale contiene molte più informazioni di base per chi inizia.
Greg Gum,

7
Questa risposta è migliore di quella accettata perché spiega cosa defaultsignifichi e per me la domanda riguardava questa parola.
Dariusz Sikorski il

1
@DariuszSikorski la risposta accettata spiega cosa defaultsignifica, essendo che l'esportazione predefinita può essere importata senza usare le parentesi graffe. Questa risposta è in realtà piuttosto sbagliata in quanto dice che puoi usare solo defaultquando c'è una sola esportazione in un file, il che non è affatto vero. Puoi avere più esportazioni nello stesso file, ma ovviamente solo 1 può essere impostato come defaultunico.
realUser404,

43

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


4
Questa dovrebbe essere accettata come la migliore risposta, ma ho fatto quello che potevo usando il mio voto.
Jarmos il

1
Grazie mille!
Combina il

1
Questa dovrebbe essere la risposta accettata a mani
alzate

16

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

6

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


1

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.

-3

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ù

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.