Qu'est-ce que «exporter par défaut» 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'en ai jamais vu export defaultauparavant. Existe-t-il des éléments équivalents export defaultqui peuvent être plus faciles à comprendre?

Il fait partie du système de modules ES6, décrit ici . Il existe 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 au §15.2 et la exportsyntaxe en particulier est définie au §15.2.3 de la spécification ECMAScript 2015.

export default est utilisé pour exporter une seule classe, fonction ou primitive à partir d'un fichier de script.

L'export peut également s'écrire

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 ou de modules de script

Utiliites.js

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

Cela 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, c'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

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 defaulten détail ainsi que d'autres détails sur les modules que j'ai trouvés très utiles.

J'écris ce post parce que (je suppose que je suis fatigué) je n'ai pas tout à fait compris ni le MDN, ni la description d'autres personnes et la meilleure façon de comprendre quelque chose est de l'enseigner à d'autres personnes. C'est juste que je ne vois pas de réponse simple à la question.

Qu'est-ce que «exporter par défaut» en javascript?

Dans l'exportation par défaut, le nom de l'importation est complètement indépendant et nous pouvons utiliser n'importe quel nom que nous aimons.

Je vais illustrer cette ligne avec un exemple simple.

Disons que nous avons 3 modules et 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>

La sortie est:

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!

Donc l'explication la plus longue est :

'export default' est utilisé si vous souhaitez exporter une seule chose pour un module.

Donc, ce qui est important, c'est "importer du blabla depuis './modul3.js'" - on pourrait dire à la place:

"importer pamelanderson depuis './modul3.js" puis pamelanderson (); Cela fonctionnera très bien lorsque nous utiliserons «export par défaut» et, en gros, c'est tout - cela nous permet de le nommer comme nous le souhaitons lorsqu'il est par défaut .

Ps Si vous voulez tester l'exemple - créez d'abord les fichiers, puis autorisez CORS dans le navigateur -> si vous utilisez le type firefox dans l'url du navigateur: about: config -> Recherchez "privacy.file_unique_origin" -> changez à "faux" -> ouvrez index.html -> appuyez sur F12 pour ouvrir la console et voir la sortie -> Profitez et n'oubliez pas de rétablir les paramètres cors par défaut.

Ps2 Désolé pour le nom idiot des variables

Plus d'infos @ link2medium , link2mdn1 , link2mdn2

Comme expliqué sur cette 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. Pendant 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

À mon avis, l' important à propos de l'exportation par défaut est qu'elle peut être importée avec n'importe quel nom!

s'il existe un fichier foo.js qui exporte par défaut:

export default function foo(){}

il peut être importé dans bar.js en utilisant:

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

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. Chaque type correspond à l'un des précédents. Source: MDN

Exportation nommée

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'

Export par défaut

export default class DefaultExport1 { }

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

// vous pouvez utiliser un nom différent pour l'importation par défaut

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

export default est utilisé pour exporter une seule classe, fonction ou primitive.

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

Lire la suite