J'essaie de déterminer s'il y a de grandes différences entre ces deux, à part pouvoir importer avec export defaultsimplement en faisant:

import myItem from 'myItem';

Et en utilisant export constje peux faire:

import { myItem } from 'myItem';

Je me demande s'il existe des différences et / ou des cas d'utilisation autres que celui-ci.

Il s'agit d'une exportation nommée par rapport à une exportation par défaut. export constest une exportation nommée qui exporte une ou plusieurs déclarations const.

Pour souligner: ce qui importe ici, c'est le exportmot - clé constutilisé pour déclarer une ou plusieurs déclarations const. exportpeut également être appliqué à d'autres déclarations telles que les déclarations de classe ou de fonction.

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 comme ceci:

import MyDefaultExport from "./MyFileWithADefaultExport";

Vous pouvez lui donner le nom de votre choix.

Exportation nommée ( 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 il est possible d'utiliser une valeur par défaut avec des importations nommées dans la même instruction:

import MyDefaultExport, { MyClass, MyOtherClass} from "./MyClass";

Importation d'espace de noms

Il est également possible d'importer tout depuis le fichier sur un objet:

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

Remarques

• La syntaxe favorise les exportations par défaut comme légèrement plus concises car leur cas d'utilisation est plus courant ( voir la discussion ici ).

• Une exportation par défaut est en fait une exportation nommée avec le nom default, vous pouvez donc l'importer avec une importation nommée:

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

export default affecte la syntaxe lors de l'importation de la "chose" exportée, lors de l'autorisation d'importer tout ce qui a été exporté, en choisissant le nom dans le import lui même, quel que soit le nom lors de son exportation, simplement parce qu'il est marqué comme "par défaut".

Un cas d'utilisation utile, que j'aime (et utilise), permet d'exporter une fonction anonyme sans avoir à la nommer explicitement , et seulement lorsque cette fonction est importée, il faut lui donner un nom:

Exemple:

Exportez 2 fonctions, l'une est default:

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;
}

Importez les fonctions ci-dessus. Composer un nom pour celui- defaultci:

// 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 variable), cela signifie que tout ce qui est importé était déjà nommé lors de l'exportation, il faut donc l'importer exactement sous le même nom, 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_1n'a pas été exporté module_1.js, donc rien ne sera importé

   import {divide_1} from './module_1.js

3. squaren'a pas été exporté dans module_1.js, car {}indique au moteur de rechercher explicitement uniquement les exportations nommées .

   import {square} from './module_1.js

Remarque mineure: veuillez noter que lorsque vous importez à partir d'une exportation par défaut, la dénomination est complètement indépendante. Cela a en fait un impact sur les refactorisations.

Disons que vous avez une classe Foocomme 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 Fooclasse Baret renommez également le fichier, la plupart des IDE ne toucheront PAS à votre importation. Vous vous retrouverez donc 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'

En particulier dans Typescript, j'apprécie vraiment les exportations nommées et le refactoring plus fiable. La différence est simplement le manque du defaultmot - clé et les accolades. Cette btw vous empêche également de faire une faute de frappe dans votre import 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'

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.

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

Lorsque vous mettez par défaut, c'est ce qu'on appelle l'exportation par défaut. Vous ne pouvez avoir qu'une seule exportation par défaut par fichier et vous pouvez l'importer dans un autre fichier avec le nom de votre choix. Lorsque vous ne mettez pas la valeur par défaut, appelée exportation nommée, vous devez l'importer dans un autre fichier en utilisant le même nom avec des accolades.

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

Je l'ai corrigé avec:

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

Le module de type indique au navigateur d'utiliser ES6.

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

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

Ensuite, cela devrait fonctionner.