Quand dois-je utiliser des accolades pour l'importation ES6?

Cela semble évident, mais je me suis senti un peu confus quant au moment d'utiliser des accolades pour importer un seul module dans ES6. Par exemple, dans le projet React-Native sur lequel je travaille, j'ai le fichier suivant et son contenu:

var initialState = {
    todo: {
        todos: [
            {id: 1, task: 'Finish Coding', completed: false},
            {id: 2, task: 'Do Laundry', completed: false},
            {id: 2, task: 'Shopping Groceries', completed: false},
        ]
    }
};

export default initialState;

Dans le TodoReducer.js, je dois l'importer sans accolades:

import initialState from './todoInitialState';

Si j'entoure les initialStateaccolades, j'obtiens l'erreur suivante pour la ligne de code suivante:

Impossible de lire la propriété todo de undefined

export default function todos(state = initialState.todo, action) {
// ...
}

Des erreurs similaires se produisent également sur mes composants avec les accolades. Je me demandais quand utiliser des accolades pour une seule importation, car évidemment, lors de l'importation de plusieurs composants / modules, vous devez les mettre entre accolades, ce que je sais.

Éditer:

Le message SO ici ne répond pas à ma question, au lieu de cela, je demande quand je dois ou ne dois pas utiliser d'accolades pour importer un seul module, ou je ne devrais jamais utiliser d'accolades pour importer un seul module dans ES6 (ce n'est apparemment pas le cas, comme je l'ai vu l'importation unique avec des accolades bouclés requis)

Il s'agit d'une importation par défaut :

// B.js
import A from './A'

Cela ne fonctionne que si Aa l' exportation par défaut :

// A.js
export default 42

Dans ce cas, peu importe le nom que vous lui attribuez lors de l'importation:

// B.js
import A from './A'
import MyA from './A'
import Something from './A'

Parce qu'il résoudra toujours ce qui est l' exportation par défaut de A.

Il s'agit d'une importation nommée appeléeA :

import { A } from './A'

Cela ne fonctionne que si Acontient une exportation nommée appeléeA :

export const A = 42

Dans ce cas, le nom est important car vous importez une chose spécifique par son nom d'exportation :

// B.js
import { A } from './A'
import { myA } from './A' // Doesn't work!
import { Something } from './A' // Doesn't work!

Pour que cela fonctionne, vous devez ajouter une exportation nommée correspondante à A:

// A.js
export const A = 42
export const myA = 43
export const Something = 44

Un module ne peut avoir qu'une seule exportation par défaut , mais autant d'exportations nommées que vous le souhaitez (zéro, un, deux ou plusieurs). Vous pouvez les importer tous ensemble:

// B.js
import A, { myA, Something } from './A'

Ici, nous importons l'exportation par défaut en tant que A, et les exportations nommées appelées myAet Something, respectivement.

// A.js
export default 42
export const myA = 43
export const Something = 44

Nous pouvons également leur attribuer des noms différents lors de l'importation:

// B.js
import X, { myA as myX, Something as XSomething } from './A'

Les exportations par défaut ont tendance à être utilisées pour tout ce que vous attendez normalement du module. Les exportations nommées ont tendance à être utilisées pour des utilitaires qui peuvent être utiles, mais pas toujours nécessaires. Cependant, c'est à vous de choisir comment exporter les choses: par exemple, un module peut n'avoir aucune exportation par défaut.

Il s'agit d'un excellent guide des modules ES, expliquant la différence entre les exportations par défaut et les exportations nommées.

Je dirais qu'il y a aussi une notation étoilée pour le importmot-clé ES6 qui mérite d'être mentionnée.

Si vous essayez de consoler le mixage de journaux:

import * as Mix from "./A";
console.log(Mix);

Tu auras:

Quand dois-je utiliser des accolades pour l'importation ES6?

Les supports sont dorés lorsque vous n'avez besoin que de composants spécifiques du module, ce qui réduit l'encombrement des bundlers comme webpack.

La réponse de Dan Abramov ci-dessus explique les exportations par défaut et les exportations nommées .

Lequel utiliser?

Citant David Herman : ECMAScript 6 favorise le style d'exportation unique / par défaut et donne la syntaxe la plus douce pour importer la valeur par défaut. L'importation d'exportations nommées peut et même devrait être légèrement moins concise.

Cependant, dans TypeScript, l'exportation nommée est favorisée en raison de la refactorisation. Par exemple, si vous exportez par défaut une classe et la renommez, le nom de la classe ne changera que dans ce fichier et pas dans les autres références, avec le nom de la classe exports nommé sera renommé dans toutes les références. Les exportations nommées sont également préférées pour les services publics.

Utilisez globalement ce que vous préférez.

Additionnel

L'exportation par défaut est en fait une exportation nommée avec un nom par défaut, donc l'exportation par défaut peut être importée en tant que:

import {default as Sample} from '../Sample.js';

Si vous pensez importque le sucre de syntaxe est juste pour les modules de nœuds, les objets et la déstructuration, je trouve que c'est assez intuitif.

// bar.js
module = {};

module.exports = { 
  functionA: () => {},
  functionB: ()=> {}
};

 // really all that is is this:
 var module = { 
   exports: {
      functionA, functionB
   }
  };

// then, over in foo.js

// the whole exported object: 
var fump = require('./bar.js'); //= { functionA, functionB }
// or
import fump from './bar' // same thing, object functionA and functionB props


// just one prop of the object
var fump = require('./bar.js').functionA;

// same as this, right?
var fump = { functionA, functionB }.functionA;

// and if we use es6 destructuring: 
var { functionA } =  { functionA, functionB };
// we get same result

// so, in import syntax:
import { functionA } from './bar';

Pour comprendre l'utilisation des accolades dans les importinstructions, vous devez d'abord comprendre le concept de destruction introduit dans ES6

1. Déstructuration d'objets

   var bodyBuilder = {
     firstname: 'Kai',
     lastname: 'Greene',
     nickname: 'The Predator'
   };
   
   var {firstname, lastname} = bodyBuilder;
   console.log(firstname, lastname); //Kai Greene
   
   firstname = 'Morgan';
   lastname = 'Aste';
   
   console.log(firstname, lastname); // Morgan Aste

2. Déstructuration des baies

   var [firstGame] = ['Gran Turismo', 'Burnout', 'GTA'];
   
   console.log(firstGame); // Gran Turismo

   Utilisation de la correspondance de liste

     var [,secondGame] = ['Gran Turismo', 'Burnout', 'GTA'];
     console.log(secondGame); // Burnout

   Utilisation de l'opérateur d'étalement

   var [firstGame, ...rest] = ['Gran Turismo', 'Burnout', 'GTA'];
   console.log(firstGame);// Gran Turismo
   console.log(rest);// ['Burnout', 'GTA'];

Maintenant que nous avons cela hors de notre chemin, dans ES6 vous pouvez exporter plusieurs modules. Vous pouvez ensuite utiliser la déstructuration d'objets comme ci-dessous

Supposons que vous ayez un module appelé module.js

    export const printFirstname(firstname) => console.log(firstname);
    export const printLastname(lastname) => console.log(lastname);

Vous souhaitez importer les fonctions exportées dans index.js;

    import {printFirstname, printLastname} from './module.js'

    printFirstname('Taylor');
    printLastname('Swift');

Vous pouvez également utiliser différents noms de variables comme ceci

    import {printFirstname as pFname, printLastname as pLname} from './module.js'

    pFname('Taylor');
    pLanme('Swift');

ES6Modules récapitulatifs :

exportations:

Vous avez 2 types d'export:

1. Exportations nommées
2. Exportations par défaut, max 1 par module

Syntaxe:

// Module A
export const importantData_1 = 1;
export const importantData_2 = 2;
export default function foo () {}

Importations:

Le type d'exportation (c'est-à-dire les exportations nommées ou par défaut) affecte la façon d'importer quelque chose:

1. Pour une exportation nommée, nous devons utiliser des accolades et le nom exact comme déclaration (c'est-à-dire variable, fonction ou classe) qui a été exportée.
2. Pour une exportation par défaut, nous pouvons choisir le nom.

Syntaxe:

// Module B, imports from module A which is located in the same directory

import { importantData_1 , importantData_2  } from './A';  // for our named imports

// syntax single named import: 
// import { importantData_1 } 

// for our default export (foo), the name choice is arbitrary
import ourFunction from './A';   

Choses d'intérêt:

1. Utilisez une liste séparée par des virgules entre accolades avec le nom correspondant de l'exportation pour l'exportation nommée.
2. Utilisez un nom de votre choix sans accolades pour une exportation par défaut.

Alias:

Chaque fois que vous souhaitez renommer une importation nommée, cela est possible via des alias . La syntaxe est la suivante:

import { importantData_1 as myData } from './A';

Maintenant, nous avons importé importantData_1 mais l'identifiant est à la myDataplace de importantData_1.

généralement, lorsque vous exportez une fonction, vous devez utiliser le {}

if you have export const x 

tu utilises import {x} from ''

if you use export default const x 

vous devez utiliser import X from '' ici, vous pouvez changer X pour n'importe quelle variable que vous voulez

Les accolades ({}) sont utilisées pour importer des liaisons nommées et le concept derrière cela est la déstructuration de l'affectation

Une démonstration simple du fonctionnement de la déclaration d'importation avec un exemple peut être trouvée dans ma propre réponse à une question similaire sur Quand utilisons-nous '{}' dans les importations javascript?

Les accolades sont utilisées uniquement pour l'importation lorsque l'exportation est nommée. Si l'exportation est par défaut, les accolades ne sont pas utilisées pour l'importation.

Pour une exportation par défaut, nous n'utilisons pas {} lors de l'importation.

par exemple

player.js

export default vx;

index.js

import vx from './player';

index.js

player.js

Si nous voulons importer tout ce que nous exportons, nous utilisons *