web-dev-qa-db-fra.com

Qu'est-ce que "export default" en javascript?

Fichier: SafeString.js

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

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

export default SafeString;

Je n'ai jamais vu export default auparavant. Existe-t-il un contenu équivalent pour export default qui puisse être plus facile à comprendre?

javascriptnode.jsecmascript-6
463
damphat

Cela fait partie du système de module ES6, décrit ici . Il y a un exemple utile dans cette documentation, également:

Si un module définit une exportation par défaut:

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

alors vous pouvez importer cette exportation par défaut en omettant les accolades:

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

Mise à jour: Depuis juin 2015, le système de modules est défini notamment dans §15.2 et dans la syntaxe export. est défini dans §15.2. de la spécification ECMAScript 2015.

373
p.s.w.g

export default permet d'exporter une classe, une fonction ou une primitive unique à partir d'un fichier de script.

L'export peut aussi être écrit comme

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

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

Ceci est utilisé pour importer cette fonction dans un autre fichier de script

Dites dans app.js, vous pouvez

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

Un peu d'exportation

Comme son nom l'indique, il est utilisé pour exporter des fonctions, des objets, des classes ou des expressions à partir de fichiers de script ou de modules

tiliites.js

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

Ceci peut être importé et utilisé comme

App.js

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

Ou

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

Lorsque l'exportation par défaut est utilisée, cela est beaucoup plus simple. Les fichiers de script exportent juste une chose. cube.js

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

et utilisé comme App.js

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

export default function(){} peut être utilisé lorsque la fonction n'a pas de nom. Il ne peut y avoir qu'une seule exportation par défaut dans un fichier. L'alternative est une exportation nommée.

Cette page décrit export default en détail ainsi que d'autres détails sur les modules que j'ai trouvés très utiles.

68
Greg Gum

Comme expliqué sur ce page MDN

Il existe deux types d'exportation différents, nommés et par défaut. Vous pouvez avoir plusieurs exportations nommées par module, mais une seule exportation par défaut [...] Les exportations nommées sont utiles pour exporter plusieurs valeurs. Lors de l'importation, il est obligatoire d'utiliser le même nom de l'objet correspondant.Mais une exportation par défaut peut être importée avec n'importe quel nom

Par exemple:

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
9
manfall19