javascript - ES 6 モジュールでデフォルトを再エクスポート

Question

ES6 では、次のコードを短くすることは可能ですか。App.jsファイルとindex.js.

index.js

import App from './App';

export default App;

このようなもの

index.js

export default App from './App.js'

Answer 1

proposal-export-default-fromBabel プラグイン( preset の一部stage-1)を使用する場合、次のコードを使用してデフォルトを再エクスポートできます。

export default from "./App.js"

詳細については、ECMAScript の提案を参照してください。

---

別の方法 (このプラグインを使用しない場合) は次のとおりです。

export { default as App } from "./App.js"

---

上記は、それぞれ独自のexportを持つ個別のファイルが、たとえば などのすべての共通点を持っている場合の非常に一般的な方法です。したがって、たとえば、複数の importを記述する代わりに、 3 つのユーティリティ関数をインポートutilsしたい場合:

import util_a from 'utils/util_a' 
import util_b from 'utils/util_b' 
import util_c from 'utils/util_c' 

任意のユーティリティを 1 行でインポートできます。

import { util_a, util_b , util_c } from 'utils' 

index.jsフォルダーにファイルを作成し、/utilsそこにあるすべてのユーティリティのすべてのデフォルトをインポートして再エクスポートすることにより、indexファイルはそのフォルダーに関連するすべてのインポートの「ゲートウェイ」として機能します。

Answer 2

これは以前の回答から少し繰り返していますが、2 つのオプションの違いを明確にするためです。

1.デフォルトのエクスポート

（これはOPが望んでいるもののようです）

export { default } from './App'

// in a different file
import App from './index'

2.名前付きエクスポート

export { default as App } from './App'

// in another file
import { App } from './index'

これらはreact、vsync の応答状態として機能します。

Answer 3

唯一の実用的な解決策は次のとおりです。

import App from './App';

export default App;

このようにモジュールをエクスポートすると

export { default as App } from './App.js';

その後、それはデフォルトのエクスポートではなくなり、デフォルトのインポートとしてインポートしようとするとエラーが発生します。