Great gugly muglys! Isso foi mais difícil do que precisava ser.
Exportar um padrão simples
Esta é uma grande oportunidade de usar propagação ( ...em { ...Matters, ...Contacts }abaixo:
// 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);
Em seguida, para executar o código compilado babel na linha de comando (na raiz do projeto /):
$ 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' }
Exportar um padrão semelhante a uma árvore
Se você preferir não substituir as propriedades, altere:
// imports/collections/index.js
import Matters from './Matters'; // import default as 'Matters'
import Contacts from './Contacts';
export default { // export default
Matters,
Contacts,
};
E a saída será:
$ npx babel-node --presets @babel/preset-env imports/test.js
{ Matters: { hello: 'World', something: 'important' },
Contacts: { hello: 'Moon', email: 'hello@example.com' } }
Exportar várias exportações nomeadas sem padrão
Se você é dedicado ao DRY , a sintaxe das importações também muda:
// imports/collections/index.js
// export default as named export 'Matters'
export { default as Matters } from './Matters';
export { default as Contacts } from './Contacts';
Isso cria 2 exportações nomeadas sem exportação padrão. Então mude:
// imports/test.js
import { Matters, Contacts } from './collections';
console.log(Matters, Contacts);
E a saída:
$ npx babel-node --presets @babel/preset-env imports/test.js
{ hello: 'World', something: 'important' } { hello: 'Moon', email: 'hello@example.com' }
Importar todas as exportações nomeadas
// 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);
Observe a desestruturação import { Matters, Contacts } from './collections'; no exemplo anterior.
$ npx babel-node --presets @babel/preset-env imports/test.js
{ Matters: [Getter], Contacts: [Getter] }
{ hello: 'World', something: 'important' } { hello: 'Moon', email: 'hello@example.com' }
Na prática
Dados esses arquivos de origem:
/myLib/thingA.js
/myLib/thingB.js
/myLib/thingC.js
Criar um /myLib/index.jspara agrupar todos os arquivos anula o propósito de importação / exportação. Seria mais fácil tornar tudo global em primeiro lugar do que tornar tudo global via importação / exportação via "arquivos de wrapper" index.js.
Se você deseja um arquivo específico, import thingA from './myLib/thingA';em seus próprios projetos.
Criar um "arquivo wrapper" com exportações para o módulo só faz sentido se você estiver empacotando para npm ou em um projeto de várias equipes com vários anos.
Chegou tão longe? Veja os documentos para mais detalhes.
Além disso, sim, para o Stackoverflow finalmente suportando três `s como marcação de cerca de código.