Deze vertaling is niet volledig. Help dit artikel te vertalen vanuit het Engels.

Het export statement wordt gebruikt bij het maken van JavaScript modules om functies, objecten of primitieve waarden te exporteren van de module zodat deze gebruikt kunnen worden door andere programmas met de import statement.

Geëxporteerde modules worden altijd uitgevoerd in strict mode ongeacht of dat is aangegeven. Het export-statement kan niet gebruikt worden in ingevoegde scripts.

Deze functie is momenteel niet geïmplementeerd in Internet Explorer, Android webview en Samsung Internet. Het is ook geïmplementeerd in vele 'transpilers' zoals de Traceur Compiler, Babel of Rollup.

Syntax

export { name1, name2, …, nameN };
export { variable1 as name1, variable2 as name2, …, nameN };
export let name1, name2, …, nameN; // also var, function
export let name1 = …, name2 = …, …, nameN; // also var, const
export function FunctionName() {...}
export class ClassName {...}

export default expression;
export default function (…) { … } // also class, function*
export default function name1(…) { … } // also class, function*
export { name1 as default, … };

export * from …;
export { name1, name2, …, nameN } from …;
export { import1 as name1, import2 as name2, …, nameN } from …;
export { default } from …;

 

nameN
Identificator die geëxporteerd moet worden (zodat het geïmporteerd kan worden via import in een ander script).

Beschrijving

Er zijn 2 verschillende types van export: named en default. Er kunnen meerdere named exports per module bestaan, maar slechts een default export. Elk type komt overeen met een van de bovenstaande syntaxen.

  • Genoemde exports (named exports):
    // exporteert een eerder gedeclareerde functie
    export { myFunction }; 
    
    // exporteert een constante
    export const foo = Math.sqrt(2);
  • Standaard exports (default exports) (function):
    export default function() {} 
  • Standaard exports (default exports) (class):
    export default class {} 

Genoemde exports zijn handig om verschillende waardes te exporteren. Tijdens de import is het verplicht om dezelfde naam als het overeenkomende object te gebruiken.

Maar een standaard export kan geïmporteerd worden met enige andere naam, bijvoorbeeld:

let k; export default k = 12; // in bestand test.js

import m from './test' // let op dat we de vrijheid hebben om import m te gebruiken in plaats van import k, omdat k een default export is.

console.log(m);        // Zal '12' in de console laten zien

Er kan slechts 1 standaard export zijn.

De volgende syntax exporteert geen standaard export van de geïmporteerde module:

export * from …;

Gebruik de volgende syntax als de standaard export nodig is:

export {default} from 'mod';

Voorbeelden

Genoemde (named) exports gebruiken

In de module zouden we de volgende code kunnen gebruiken:

// module "my-module.js"
function cube(x) {
  return x * x * x;
}
const foo = Math.PI + Math.SQRT2;
export { cube, foo };

Op deze manier zouden we in een ander script deze code kunnen hebben:

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

De standaard (default) export gebruiken

Als we een enkele waarde willen exporteren of willen terugvallen op een waarde voor onze module zouden we een standaard (default) export kunnen gebruiken:

// module "my-module.js"
export default function cube(x) {
  return x * x * x;
}

Op die manier zal het vanzelfsprekend zijn om in een ander script de standaard (default) export te importeren:

import cube from 'my-module';
console.log(cube(3)); // 27

Merk op dat het niet mogelijk is om var, let of const te gebruiken met export default.

Specificaties

Specification Status Comment
ECMAScript 2015 (6th Edition, ECMA-262)
The definition of 'Exports' in that specification.
Standard Initiële definitie.
ECMAScript Latest Draft (ECMA-262)
The definition of 'Exports' in that specification.
Draft  

Browser compatibiliteit

Update compatibility data on GitHub
DesktopMobileServer
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome voor AndroidEdge MobileFirefox voor AndroidOpera voor AndroidiOS SafariSamsung InternetNode.js
BasisondersteuningChrome Volledige ondersteuning 61Edge Volledige ondersteuning 16
Volledige ondersteuning 16
Volledige ondersteuning 15
Uitgeschakeld
Uitgeschakeld From version 15: this feature is behind the Experimental JavaScript Features preference.
Firefox Volledige ondersteuning 60
Volledige ondersteuning 60
Geen ondersteuning 54 — 60
Uitgeschakeld
Uitgeschakeld From version 54 until version 60 (exclusive): this feature is behind the dom.moduleScripts.enabled preference. To change preferences in Firefox, visit about:config.
IE Geen ondersteuning NeeOpera Volledige ondersteuning 47Safari Volledige ondersteuning 10.1WebView Android Geen ondersteuning NeeChrome Android Volledige ondersteuning 61Edge Mobile Volledige ondersteuning JaFirefox Android Volledige ondersteuning 60
Volledige ondersteuning 60
Geen ondersteuning 54 — 60
Uitgeschakeld
Uitgeschakeld From version 54 until version 60 (exclusive): this feature is behind the dom.moduleScripts.enabled preference. To change preferences in Firefox, visit about:config.
Opera Android Volledige ondersteuning 47Safari iOS Volledige ondersteuning 10.1Samsung Internet Android Geen ondersteuning Neenodejs ?

Legenda

Volledige ondersteuning  
Volledige ondersteuning
Geen ondersteuning  
Geen ondersteuning
Compatibiliteit onbekend  
Compatibiliteit onbekend
Gebruiker moet deze functie expliciet inschakelen.
Gebruiker moet deze functie expliciet inschakelen.

Bekijk ook

Documentlabels en -medewerkers

Aan deze pagina hebben bijgedragen: SphinxKnight, rjsibon, artusvranken
Laatst bijgewerkt door: SphinxKnight,