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

Question

Cela semble évident, mais je me suis retrouvé un peu perdu à savoir quand utiliser les 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 :

Fichier état initial.js

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 fichier TodoReducer.js, je dois l'importer sans accolades :

import initialState from './todoInitialState';

Si je joins le initialState entre accolades, j'obtiens l'erreur suivante pour la ligne de code suivante :

Impossible de lire la propriété todo d'undefined

Fichier TodoReducer.js :

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

Des erreurs similaires se produisent également pour mes composants avec les accolades. Je me demandais quand je devais utiliser les accolades pour une seule importation, car évidemment, lorsque l'on importe plusieurs composants/modules, il faut les entourer d'accolades, ce que je sais.

Le post de Stack Overflow à aquí ne répond pas à ma question, je demande plutôt quand Je dois ou ne dois pas utiliser les accolades pour importer une simple ou je ne devrais jamais utiliser d'accolades pour importer un module unique dans ES6 (ce n'est apparemment pas le cas, car j'ai vu des importations uniques avec des accolades obligatoires).

Answer 1

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

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

Cela ne fonctionne que si A a le exportation par défaut :

// A.js
export default 42

Dans ce cas, le nom que vous lui attribuez lors de l'importation n'a aucune importance :

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

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

---

Il s'agit d'un nommé importé appelé A :

import { A } from './A'

Cela ne fonctionne que si A contient un nommé exporté appelé A :

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 les faire fonctionner, il faut ajouter un l'exportation nommée correspondante a A :

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

---

Un module ne peut avoir que une 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 comme A et des exportations nommées appelées myA y 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 vous attendez normalement à obtenir du module. Les exportations nommées sont utilisées pour les utilitaires qui peuvent être pratiques, mais qui ne sont pas toujours nécessaires. Cependant, c'est à vous de choisir comment exporter les choses : par exemple, un module peut ne pas avoir d'exportation par défaut du tout.

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

Answer 2

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

Si vous essayez de consigner dans la console Mix :

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

Vous aurez :

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

Les parenthèses sont utiles lorsque vous n'avez besoin que de composants spécifiques du module, ce qui permet de réduire les empreintes pour les bundlers comme webpack.

Answer 3

TL;DR : Les accolades sont utilisées si vous souhaitez importer une exportation qui n'est pas par défaut.

Voir la réponse de Dan Abramovs ci-dessus pour plus de détails.

Answer 4

La réponse de Dan Abramov explique à propos de la exportations par défaut y exportations nominatives .

Lequel utiliser ?

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

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

Dans l'ensemble, utilisez ce que vous préférez.

Supplémentaire

L'exportation par défaut est en fait une exportation nommée avec le nom default, ainsi l'exportation par défaut peut être importée comme :

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

Answer 5

Si vous pensez à import comme un simple sucre de syntaxe pour les modules, objets, et 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' // The same thing - object functionA and functionB properties

// Just one property 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';