web-dev-qa-db-fra.com

Javascript (ES6), exportation const vs export default

J'essaie de déterminer s'il y a de grandes différences entre ces 2, si ce n'est pouvoir importer avec export default simplement en faisant:

import myItem from 'myItem';

Et en utilisant export const je peux faire:

import { myItem } from 'myItem';

Je me demande s’il existe des différences et/ou des cas d’utilisation autres que cela.

javascriptecmascript-6
142
ajmajmajma

C'est une exportation nommée vs une exportation par défaut. export const est une exportation nommée avec le mot clé const.

Export par défaut (export default)

Vous pouvez avoir une exportation par défaut par fichier. Lorsque vous importez, vous devez spécifier un nom et importer de la manière suivante:

import MyDefaultExport from "./MyFileWithADefaultExport";

Vous pouvez donner ce nom comme vous le souhaitez.

Export nommé (export)

Avec les exportations nommées, vous pouvez avoir plusieurs exportations nommées par fichier. Importez ensuite les exportations spécifiques que vous souhaitez entourées d'accolades:

// ex. importing multiple exports:
import { MyClass, MyOtherClass } from "./MyClass";
// ex. giving a named import a different name by using "as":
import { MyClass2 as MyClass2Alias } from "./MyClass2";

// use MyClass, MyOtherClass, and MyClass2Alias here

Ou importez toutes les exportations nommées sur un objet:

import * as MyClasses from "./MyClass";
// use MyClasses.MyClass and MyClass.MyOtherClass here

Vous pouvez utiliser une exportation par défaut ou des exportations nommées ou les deux en même temps. La syntaxe préconise des exportations par défaut légèrement plus concises car leur cas d'utilisation est plus courant ( Voir la discussion ici ).

Notez qu'une exportation par défaut est en fait une exportation nommée avec le nom default afin que vous puissiez l'importer de la manière suivante:

import { default as MyDefaultExport } from "./MyFileWithADefaultExport";
238
David Sherret

export default affecte la manière dont la syntaxe import doit être utilisée lors de l'importation d'un module.

Un cas d’utilisation utile, que j’aime (et que j’utilise), permet d’exporter une fonction anonyme sans que explicitement n’ait à le nommer, et seulement lorsque cette fonction est importée, une prénom:

Exemple:

module 1

export function divide( x ){
    return x / 2;
}

// only one 'default' function may be exported and the rest (above) must be named
export default function( x ){  // <---- declared as a default function
    return x * x;
}

module_2

// The default function should be the first to import (and named whatever)
import square, {divide} from './module_1.js'; // I named the default "square" 

console.log( square(2), divide(2) ); // 4, 1

Lorsque la syntaxe {} est utilisée pour importer une fonction (ou une variable), cela signifie que tout ce qui est importé porte le nom déjà lors de son exportation. Vous devez donc l'importer avec le même nom exact, sinon l'importation ne fonctionnerait pas.

Exemples erronés:

  1. La fonction par défaut doit être la première à importer

    import {divide}, square from './module_1.js

  2. divide_1 n'a pas été exporté dans module_1.js, ainsi rien ne sera importé

    import {divide_1} from './module_1.js

  3. square n'a pas été exporté dans module_1.js, car {} demande au moteur de rechercher explicitement les exportations named uniquement.

    import {square} from './module_1.js
9
vsync

Remarque mineure: Veuillez noter que lorsque vous importez à partir d'une exportation par défaut, le nom est complètement indépendant. Cela a effectivement un impact sur les refactorisations.

Disons que vous avez une classe Foo comme celle-ci avec une importation correspondante:

export default class Foo { }

//the name 'Foo' could be anything, since it's just an
//identifier for the default export
import Foo from './Foo'

Maintenant, si vous refactorisez votre classe Foo en Bar et renommez également le fichier, la plupart des IDE ne toucheront PAS votre importation. Donc, vous allez vous retrouver avec ceci:

export default class Bar { }

//the name 'Foo' could be anything, since it's just an
//identifier for the default export.
import Foo from './Bar'

Surtout dans TypeScript, j'apprécie beaucoup les exportations nommées et le refactoring plus fiable. La différence réside simplement dans l'absence du mot clé default et des accolades. Cela vous empêche également de faire une faute de frappe dans votre importation puisque vous avez maintenant la vérification de type.

export class Foo { }

//'Foo' needs to be the class name. The import will be refactored
//in case of a rename!
import { Foo } from './Foo'
7
Philipp Sumi

De la documentation :

Les exportations nommées sont utiles pour exporter plusieurs valeurs. Lors de l'importation, on pourra utiliser le même nom pour faire référence à la valeur correspondante.

En ce qui concerne l'exportation par défaut, il n'y a qu'une seule exportation par défaut par module. Une exportation par défaut peut être une fonction, une classe, un objet ou autre chose. Cette valeur doit être considérée comme la valeur "principale" exportée car ce sera la plus simple à importer.

5
James Sumners

J'ai eu le problème que le navigateur n'utilise pas es6.

J'ai le réparer avec:

 <script type="module" src="index.js"></script>

Le module type indique au navigateur d'utiliser ES6.

export const bla = [1,2,3];

import {bla} from './example.js';

Alors ça devrait marcher.

0
Marcel Zebrowski

Lorsque vous mettez par défaut, il s’appelle exportation par défaut. Vous ne pouvez avoir qu'un seul export par défaut et vous pouvez l'importer dans un autre fichier avec le nom de votre choix. Lorsque vous ne mettez pas par défaut, son exportation nommée nommée, vous devez l'importer dans un autre fichier en utilisant le même nom avec des accolades à l'intérieur.

0
Abdullah Danyal