Grands gugly muglys! C'était plus difficile que nécessaire.
Exporter un plat par défaut
Ceci est une excellente occasion d'utiliser la propagation ( ...en - { ...Matters, ...Contacts }dessous:
// imports/collections/Matters.js
export default { // default export
hello: 'World',
something: 'important',
};
// imports/collections/Contacts.js
export default { // default export
hello: 'Moon',
email: 'hello@example.com',
};
// imports/collections/index.js
import Matters from './Matters'; // import default export as var 'Matters'
import Contacts from './Contacts';
export default { // default export
...Matters, // spread Matters, overwriting previous properties
...Contacts, // spread Contacts, overwriting previosu properties
};
// imports/test.js
import collections from './collections'; // import default export as 'collections'
console.log(collections);
Ensuite, pour exécuter le code compilé babel à partir de la ligne de commande (à partir de la racine du projet /):
$ npm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/node
(trimmed)
$ npx babel-node --presets @babel/preset-env imports/test.js
{ hello: 'Moon',
something: 'important',
email: 'hello@example.com' }
Exporter une arborescence par défaut
Si vous préférez ne pas écraser les propriétés, modifiez:
// imports/collections/index.js
import Matters from './Matters'; // import default as 'Matters'
import Contacts from './Contacts';
export default { // export default
Matters,
Contacts,
};
Et la sortie sera:
$ npx babel-node --presets @babel/preset-env imports/test.js
{ Matters: { hello: 'World', something: 'important' },
Contacts: { hello: 'Moon', email: 'hello@example.com' } }
Exporter plusieurs exportations nommées sans défaut
Si vous êtes dédié à DRY , la syntaxe des importations change également:
// imports/collections/index.js
// export default as named export 'Matters'
export { default as Matters } from './Matters';
export { default as Contacts } from './Contacts';
Cela crée 2 exportations nommées sans exportation par défaut. Puis changez:
// imports/test.js
import { Matters, Contacts } from './collections';
console.log(Matters, Contacts);
Et la sortie:
$ npx babel-node --presets @babel/preset-env imports/test.js
{ hello: 'World', something: 'important' } { hello: 'Moon', email: 'hello@example.com' }
Importer toutes les exportations nommées
// imports/collections/index.js
// export default as named export 'Matters'
export { default as Matters } from './Matters';
export { default as Contacts } from './Contacts';
// imports/test.js
// Import all named exports as 'collections'
import * as collections from './collections';
console.log(collections); // interesting output
console.log(collections.Matters, collections.Contacts);
Remarquez la déstructuration import { Matters, Contacts } from './collections'; dans l'exemple précédent.
$ npx babel-node --presets @babel/preset-env imports/test.js
{ Matters: [Getter], Contacts: [Getter] }
{ hello: 'World', something: 'important' } { hello: 'Moon', email: 'hello@example.com' }
En pratique
Compte tenu de ces fichiers source:
/myLib/thingA.js
/myLib/thingB.js
/myLib/thingC.js
Créer un /myLib/index.jspour regrouper tous les fichiers va à l'encontre du but de l'importation / exportation. Il serait plus facile de tout rendre global en premier lieu, que de tout rendre global via l'importation / exportation via les "fichiers wrapper" index.js.
Si vous voulez un fichier particulier, import thingA from './myLib/thingA'; dans vos propres projets.
La création d'un "fichier wrapper" avec des exportations pour le module n'a de sens que si vous empaquetez pour npm ou sur un projet pluriannuel pluriannuel.
Tu es arrivé jusqu'ici? Voir les documents pour plus de détails.
Aussi, oui pour Stackoverflow supportant finalement trois `comme code de clôture.