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:
initialState.jsvar 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 initialState
accolades, j'obtiens l'erreur suivante pour la ligne de code suivante:
TodoReducer.js: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)
la source
Réponses:
Il s'agit d'une importation par défaut :
Cela ne fonctionne que si
A
a l' exportation par défaut :Dans ce cas, peu importe le nom que vous lui attribuez lors de l'importation:
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ée
A
:Cela ne fonctionne que si
A
contient une exportation nommée appeléeA
:Dans ce cas, le nom est important car vous importez une chose spécifique par son nom d'exportation :
Pour que cela fonctionne, vous devez ajouter une exportation nommée correspondante à
A
: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:
Ici, nous importons l'exportation par défaut en tant que
A
, et les exportations nommées appeléesmyA
etSomething
, respectivement.Nous pouvons également leur attribuer des noms différents lors de l'importation:
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.
la source
export const myA = 43; export const Something = 44;
ainsi qu'unexport default { myA, Something }
? Donc, lorsque vous importez, vous pouvez soitimport A from './A';
pour tout dans le module, soitimport { Something } from './A';
vous ne recevez qu'une partie du moduleimport * as AllTheThings
.import 'firebase/storage';
ouimport 'rxjs/add/operator/map';
. Qu'est-ce que cela fait réellement?Je dirais qu'il y a aussi une notation étoilée pour le
import
mot-clé ES6 qui mérite d'être mentionnée.Si vous essayez de consoler le mixage de journaux:
Tu auras:
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 source
import * as Mix from "./A";
etimport A as Mix from "./A";
les mêmes?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:
la source
Additional
ligne est une bonne information.import A from './A'
n'a pas de sens si vous exportez sans définir un nom commeexport default 42
.Si vous pensez
import
que 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.la source
Pour comprendre l'utilisation des accolades dans les
import
instructions, vous devez d'abord comprendre le concept de destruction introduit dans ES6Déstructuration d'objets
Déstructuration des baies
Utilisation de la correspondance de liste
Utilisation de l'opérateur d'étalement
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
Vous souhaitez importer les fonctions exportées dans
index.js
;Vous pouvez également utiliser différents noms de variables comme ceci
la source
import {printFirstname as pFname, printLastname as pLname} from './module.js'
équivaut à:var foo = {printFirstname: 'p_f_n', printLastname: 'p_l_n'}; var { printFirstname:pFname, printLastname: pLname } = foo; pFname('Taylor'); pLname('Swift');
ES6
Modules récapitulatifs :exportations:
Vous avez 2 types d'export:
Syntaxe:
Importations:
Le type d'exportation (c'est-à-dire les exportations nommées ou par défaut) affecte la façon d'importer quelque chose:
Syntaxe:
Choses d'intérêt:
Alias:
Chaque fois que vous souhaitez renommer une importation nommée, cela est possible via des alias . La syntaxe est la suivante:
Maintenant, nous avons importé
importantData_1
mais l'identifiant est à lamyData
place deimportantData_1
.la source
généralement, lorsque vous exportez une fonction, vous devez utiliser le {}
tu utilises
import {x} from ''
vous devez utiliser
import X from ''
ici, vous pouvez changer X pour n'importe quelle variable que vous voulezla source
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?
la source
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.
la source
Pour une exportation par défaut, nous n'utilisons pas {} lors de l'importation.
par exemple
player.js
index.js
index.js
player.js
Si nous voulons importer tout ce que nous exportons, nous utilisons *
la source