à Partir de la documentation :

Nommé exportations sont utiles à l'exportation de plusieurs valeurs. Lors de l'importation, on pourra utiliser le même nom pour se référer à 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 n'importe quoi d'autre. Cette valeur est considérée comme le "principal" valeur exportée car il sera le plus simple pour importer.

default ne peut être utilisé qu'une fois par module.

le cas d'utilisation pour cela est de vous permettre d'exporter un anonyme fonction sans explicitement devant l'appeler, et seulement lorsque cette fonction est importée, il doit être donné un 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 variable) cela signifie que ce qui est importé était déjà nommé lors de l'exportation, donc on doit l'importer par le exact 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_1 n'a pas été exporté en module_1.js , donc rien ne sera importé

   import {divide_1} from './module_1.js
   

3. square n'a pas été exporté dans module_1.js , parce que {} indique au moteur de rechercher explicitement nommé exportations seulement.

   import {square} from './module_1.js
   

Note mineure: veuillez considérer que lorsque vous importez à partir d'une exportation par défaut, le nom est complètement indépendant. Cela a en fait un impact sur les réaménagements.

disons que vous avez une classe Foo comme ceci 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 reformatez votre Foo classe pour être Bar et aussi renommer le fichier, la plupart des IDEs ne toucheront pas votre importation. Donc vous finirez 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 en typographie, j'apprécie vraiment les exportations nommées et le remaniement plus fiable. La différence est juste l'absence du mot-clé default et les accolades bouclées. Ce btw vous empêche également de faire une typographie dans votre import puisque vous avez la vérification de type maintenant.

export class Foo { }

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

quand vous mettez par défaut, son appelé exportation par défaut. Vous ne pouvez avoir qu'une exportation par défaut par fichier et vous pouvez l'importer dans un autre fichier avec n'importe quel nom que vous voulez. Lorsque vous n'avez pas mis par défaut, nommé à l'exportation, vous devez l'importer dans un autre fichier en utilisant le même nom avec des accolades à l'intérieur.

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

j'ai fixer 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.