Co to jest „domyślny eksport” w javascript?

570

Plik: SafeString.js

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

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

export default SafeString;

Nigdy wcześniej nie widziałem export default. Czy są jakieś równoważne rzeczy, export defaultktóre mogą być łatwiejsze do zrozumienia?

damphat
źródło
29
To jest bardzo jasne wyjaśnienie na tym 24ways.org/2014/javascript-modules-the-es6-way
nish1013
2
exportszczegóły słowa kluczowego tutaj . Obecnie jest nie obsługiwane natywnie przez któregokolwiek z przeglądarek internetowych.
RBT
3
Jest teraz obsługiwany we wszystkich przeglądarkach oprócz IE.
Brian Di Palma
1
Bardzo dobra odpowiedź stackoverflow.com/a/36426988/5473170
Suraj Jain
Oto spójrz ^ powyżej na odpowiedzi; spójrz \ / poniżej na zamieszanie. Pokazałem u da wai
Andrew

Odpowiedzi:

456

Jest to część opisanego tutaj systemu modułów ES6 . W tej dokumentacji znajduje się pomocny przykład, również:

Jeśli moduł definiuje domyślny eksport:

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

następnie możesz zaimportować domyślny eksport, pomijając nawiasy klamrowe:

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

Aktualizacja: od czerwca 2015 r. System modułów jest zdefiniowany w § 15.2, a exportw szczególności składnia jest zdefiniowana w § 15.2.3 specyfikacji ECMAScript 2015.

pswg
źródło
1
@GeenHenk Przypuszczam, że należy się tego spodziewać, ponieważ ES6 wciąż jest wersją roboczą. Podałem zaktualizowany link i oświadczenie.
pswg,
7
Nie rozumiem, w jaki sposób domyślna funkcja eksportu () {} różni się od funkcji eksportu = funkcja () {} ....
Alexander Mills,
1
co z przypadkami, w których jest tak, export const Foo = () => {}a potem na końcu pliku export default Foowidzę to w wielu przykładach reakcji. Co jest z tymi dwoma eksportami?
FlavorScape
Byłoby miło zobaczyć przykład z domyślnym i nazwanym eksportem. Innymi słowy, taki eksport, który byłby satysfakcjonującyimport foo, { bar, baz } from './foo';
gumkins
1
Dzięki za odpowiedź, ale użycie foo w drugim przykładzie jest nieco niejednoznaczne; co jest foo i jak nazwałeś pierwszy plik; jak możesz to zrobić import foo from "foo"? Czy istniał obiekt zawierający foo, ponieważ w pierwszym przykładzie wyeksportowana funkcja nie jest nazwana. @pswg
nosahama
159

export default służy do eksportowania pojedynczej klasy, funkcji lub operacji podstawowej z pliku skryptu.

Eksport można również zapisać jako

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

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

Służy do importowania tej funkcji do innego pliku skryptu

Powiedz w app.js , możesz

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

Trochę o eksporcie

Jak sama nazwa wskazuje, służy do eksportowania funkcji, obiektów, klas lub wyrażeń z plików skryptów lub modułów

Utiliites.js

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

Można to zaimportować i wykorzystać jako

App.js

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

Lub

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

Gdy używany jest domyślny eksport, jest to o wiele prostsze. Pliki skryptów eksportują tylko jedną rzecz. cube.js

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

i używany jako App.js

import Cube from 'cube';
console.log(Cube(3)); // 27
Sudo Bangbang
źródło
78

export default function(){}można użyć, gdy funkcja nie ma nazwy. Plik może zawierać tylko jeden domyślny eksport. Alternatywą jest nazwany eksport.

Ta strona opisuje export defaultszczegółowo, a także inne szczegóły dotyczące modułów, które uważam za bardzo pomocne.

Greg Gum
źródło
14
Możesz użyć eksportu domyślnego i nazwanego razem, jeśli chcesz.
Bergi,
@Greg gum strona jest nieaktualna. Przekierowuje na stronę exploringjs.com/es6/ch_modules.html
rajakvk
@rajakvk, prawda, ale oryginalna strona zawiera znacznie więcej informacji dla początkujących.
Greg Gum
7
Ta odpowiedź jest lepsza niż zaakceptowana, ponieważ wyjaśnia, co defaultznaczy i dla mnie pytanie dotyczyło tego słowa.
Dariusz Sikorski
1
@DariuszSikorski zaakceptowana odpowiedź wyjaśnia, co defaultoznacza, że ​​domyślny eksport można importować bez użycia nawiasów klamrowych. Ta odpowiedź jest dość błędna, ponieważ mówi, że możesz jej użyć tylko defaultwtedy, gdy w pliku jest tylko jeden eksport, co wcale nie jest prawdą. Możesz mieć kilka eksportów w tym samym pliku, ale oczywiście tylko jeden z nich można ustawić jako defaultjeden.
realUser404
39

Piszę ten post, ponieważ (zakładam, że jestem zmęczony) nie do końca zrozumiałem, ani MDN, ani opis innych osób, a najlepszym sposobem na zrozumienie czegoś jest nauczenie tego innych ludzi. Po prostu nie widzę prostej odpowiedzi na pytanie.

Co to jest „domyślny eksport” w javascript?

W domyślnym eksporcie nazwa importu jest całkowicie niezależna i możemy użyć dowolnej nazwy, którą lubimy.

Zilustruję tę linię prostym przykładem.

Powiedzmy, że mamy 3 moduły i 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>

Dane wyjściowe to:

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!

Więc dłuższe wyjaśnienie jest :

Opcja „eksportuj domyślnie” jest używana, jeśli chcesz wyeksportować jedną rzecz dla modułu.

Ważną rzeczą jest więc „import blabla” z„ ./modul3.js ”” - moglibyśmy zamiast tego powiedzieć:

„import pamelanderson from './modul3.js”, a następnie pamelanderson (); Będzie to działało dobrze, gdy użyjemy opcji „eksportuj domyślnie” i zasadniczo to jest to - pozwala nam nazwać to, co chcemy, gdy jest domyślne .


Ps Jeśli chcesz przetestować przykład - najpierw utwórz pliki, a następnie zezwól na CORS w przeglądarce -> jeśli używasz typu firefox w adresie URL przeglądarki: about: config -> Wyszukaj „privacy.file_unique_origin” -> zmień to „false” -> otwórz index.html -> naciśnij F12, aby otworzyć konsolę i zobaczyć wyjście -> Ciesz się i nie zapomnij przywrócić ustawień domyślnych corsa.

Ps2 Przepraszamy za głupie nazewnictwo zmiennych

Więcej informacji @ link2medium , link2mdn1 , link2mdn2

Połączyć
źródło
4
To powinno być zaakceptowane jako najlepsza odpowiedź, ale zrobiłem, co mogłem, używając mojego upvote.
Jarmos
1
Dziękuję Ci bardzo!
Połącz
1
To powinna być zaakceptowana odpowiedź podniesionymi rękami
nosahama
16

Jak wyjaśniono na tej stronie MDN

Istnieją dwa różne typy eksportu, nazwane i domyślne. Możesz mieć wiele nazwanych eksportów na moduł, ale tylko jeden domyślny eksport [...] Nazwane eksporty są przydatne do eksportowania kilku wartości. Podczas importu obowiązkowe jest użycie tej samej nazwy odpowiedniego obiektu, ale domyślny eksport można zaimportować pod dowolną nazwą

Na przykład:

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
źródło
6

W moim przekonaniu ważne jest, aby domyślny eksport mógł być importowany pod dowolną nazwą!

jeśli istnieje plik foo.js, który eksportuje domyślnie:

export default function foo(){}

można go zaimportować do bar.js przy użyciu:

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

Pauls Bebris
źródło
0

Istnieją dwa różne typy eksportu, nazwane i domyślne . Możesz mieć wiele nazwanych eksportów na moduł, ale tylko jeden domyślny eksport. Każdy typ odpowiada jednemu z powyższych. Źródło: MDN

Nazwany eksport

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'

Domyślny eksport

export default class DefaultExport1 { }

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

// możesz użyć innej nazwy dla domyślnego importu

import Foo from 'path-to-file' // this will assign any default export to Foo.
Zwycięzca
źródło
-3

opcja eksportu domyślna służy do eksportowania pojedynczej klasy, funkcji lub operacji podstawowej.

eksportuj funkcję domyślną () {} można użyć, gdy funkcja nie ma nazwy. Plik może zawierać tylko jeden domyślny eksport.

Czytaj więcej

Viju
źródło