醜いマグライ！これは必要以上に困難でした。
フラットなデフォルトを1つエクスポートする
これは、使用する絶好の機会であるスプレッドを（...に{ ...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コンパイル済みコードを実行します。
$ 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' }
ツリーのようなデフォルトを1つエクスポートする
プロパティを上書きしたくない場合は、次のように変更します。
// 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または複数年のマルチチームプロジェクトでパッケージ化している場合にのみ意味があります。
ここまで作った？詳細については、ドキュメントを参照してください。
また、Stackoverflowがコードフェンスマークアップとして3つの `sをサポートするようになりました。