Великие гугли магглы! Это было сложнее, чем нужно было.
Экспортировать одну квартиру по умолчанию
Это отличная возможность использовать распространение ( ...в { ...Matters, ...Contacts }ниже:
// 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);
Затем, чтобы запустить скомпилированный код babel из командной строки (из проекта root /):
$ 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' }
Экспорт одного древовидного по умолчанию
Если вы не хотите перезаписывать свойства, измените:
// imports/collections/index.js
import Matters from './Matters'; // import default as 'Matters'
import Contacts from './Contacts';
export default { // export default
Matters,
Contacts,
};
И вывод будет:
$ npx babel-node --presets @babel/preset-env imports/test.js
{ Matters: { hello: 'World', something: 'important' },
Contacts: { hello: 'Moon', email: 'hello@example.com' } }
Экспорт нескольких именованных экспортов без по умолчанию
Если вы посвящены DRY , синтаксис в импорте также меняется:
// imports/collections/index.js
// export default as named export 'Matters'
export { default as Matters } from './Matters';
export { default as Contacts } from './Contacts';
Это создает 2 именованных экспорта без экспорта по умолчанию. Затем измените:
// imports/test.js
import { Matters, Contacts } from './collections';
console.log(Matters, Contacts);
И вывод:
$ npx babel-node --presets @babel/preset-env imports/test.js
{ hello: 'World', something: 'important' } { hello: 'Moon', email: 'hello@example.com' }
Импортировать все именованные экспорты
// 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);
Обратите внимание на разрушение import { Matters, Contacts } from './collections'; в предыдущем примере.
$ npx babel-node --presets @babel/preset-env imports/test.js
{ Matters: [Getter], Contacts: [Getter] }
{ hello: 'World', something: 'important' } { hello: 'Moon', email: 'hello@example.com' }
На практике
Учитывая эти исходные файлы:
/myLib/thingA.js
/myLib/thingB.js
/myLib/thingC.js
Создание /myLib/index.jsдля объединения всех файлов побеждает цель импорта / экспорта. Во-первых, было бы проще сделать все глобальным, чем сделать все глобальным с помощью импорта / экспорта через index.js «файлы-оболочки».
Если вы хотите определенный файл, import thingA from './myLib/thingA'; в ваших собственных проектах.
Создание «файла-обертки» с экспортом для модуля имеет смысл только в том случае, если вы собираете пакет для npm или для многолетнего многопользовательского проекта.
Сделал это так далеко? Смотрите документы для более подробной информации.
Кроме того, yay для Stackoverflow, наконец, поддерживает три в качестве разметки кода.