web-dev-qa-db-fra.com

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

Cela semble évident, mais je me suis trouvé 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 TodoReducer.js, je dois l’importer sans accolades:

import initialState from './todoInitialState';

Si je place la initialState entre des accolades, le message d'erreur suivant s'affiche pour la ligne de code suivante:

Impossible de lire la propriété todo of undefined

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

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

Modifier:

Le SO posté à ici ne répond pas à ma question, je demande plutôt when je devrais ou ne devrais pas utiliser d'accolades pour importer un module single ou je ne devrais jamais utiliser d'accolades pour importer un seul module dans ES6 (ce n'est apparemment pas le cas, car j'ai déjà vu qu'une seule importation nécessitait des accolades)

javascriptimportecmascript-6
529
TonyGW

Ceci est une importation default:

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

Cela ne fonctionne que si A a le default export:

// 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 que le résultat sera toujours l'export default de A.

Il s'agit d'une importation nommée nommée A:

import { A } from './A'

Cela ne fonctionne que si A contient une exportation named appelée 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 que cela fonctionne, vous devez ajouter un correspondant nommé export à 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 sous la forme A et les exportations nommées appelées myA et Something, respectivement.

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

Nous pouvons également leur attribuer tous les 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 pourraient être pratiques, mais ne sont pas toujours nécessaires. Toutefois, il vous appartient de choisir le mode d’exportation: par exemple, un module peut ne pas avoir d’exportation par défaut.

Ceci est un excellent guide pour les modules ES, expliquant la différence entre les exportations par défaut et les exportations nommées.

1622
Dan Abramov

TL; DR : Les accolades sont utilisées si vous souhaitez importer une exportation autre que celle par défaut.

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

94
Daniel Schmidt

Je dirais qu’il existe également une notation avec étoile pour le mot clé import ES6 qui mérite d’être mentionné.

 enter image description here

Si vous essayez de consigner le journal Mix:

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

Tu auras:

 enter image description here

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

Les crochets sont dorés lorsque vous n'avez besoin que de composants spécifiques du module, ce qui permet de créer des empreintes plus petites pour des groupes tels que webpack.

58
prosti

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

Lequel utiliser?

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

Toutefois, dans TypeScript, l’exportation nommée est privilégiée en raison du refactoring. Par exemple, si vous exportez par défaut une classe et que vous la renommez, le nom de la classe ne sera modifié que dans ce fichier et non dans les autres références. Les exportations nommées nommées nom de classe seront renommées 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.

Additionnel

L'exportation par défaut est en fait une exportation nommée avec le nom default. Vous pouvez donc exporter l'export par défaut en tant que:

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

Si vous considérez import comme un simple sucre de syntaxe pour les modules de nœud, les objets et la déstructuration, je trouve cela très 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';
11
Brandon

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 ''here, vous pouvez changer X comme vous voulez 

2
jadlmir

Pour comprendre l’utilisation des accolades dans les déclarations import, vous devez d’abord comprendre le concept de destructing 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 tableaux 

    var [firstGame] = ['Gran Turismo', 'Burnout', 'GTA'];

console.log(firstGame); // Gran Turismo

    Utiliser la correspondance de liste

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

    Utiliser l'opérateur de propagation

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

Maintenant que nous avons réussi à le faire, dans ES6 , vous pouvez exporter plusieurs modules. Vous pouvez ensuite utiliser la déstructuration d'objet comme ci-dessous

Supposons que vous avez 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

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

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

Les accolades ({}) sont utilisées pour importer des liaisons nommées et le concept qui la sous-tend est la déstructuration de l'affectation

Une simple démonstration du fonctionnement de l'instruction import avec un exemple figure dans ma propre réponse à une question similaire à Quand utilisons-nous '{}' dans les importations javascript?

0
Samuel J Mathew

Résumé ES6 modules:

exportations:

Vous avez 2 types d'exportations:

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

Syntaxe: 

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

Importations:

Le type d’exportation (c’est-à-dire les exportations nommées ou par défaut) affecte la manière d’importer quelque chose:

  1. Pour une exportation nommée, nous devons utiliser des accolades et le nom exact en tant que déclaration (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 aliases . La syntaxe est la suivante:

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

Nous avons maintenant importé importantData_1 mais l'identifiant est myData au lieu de importantData_1.

0
Willem van der Veen