javascript - indexファイルでのES6のエクスポート/インポート

私は現在、webpack/babelを介してReactアプリでES6を使用しています。モジュールのすべてのコンポーネントをまとめてエクスポートするために、インデックスファイルを使用しています。しかし、残念ながら、それは次のようになります:

import Comp1_ from './Comp1.jsx';
import Comp2_ from './Comp2.jsx';
import Comp3_ from './Comp3.jsx';

export const Comp1 = Comp1_;
export const Comp2 = Comp2_;
export const Comp3 = Comp3_;

なので、このように他の場所からきれいにインポートすることができます：

import { Comp1, Comp2, Comp3 } from './components';

明らかにそれはあまり良い解決策ではないので、他に方法があるかどうか考えていました。インポートしたコンポーネントを直接エクスポートできないようです。

回答 #1

デフォルトのインポートを簡単に再エクスポートできます:

export {default as Comp1} from './Comp1.jsx';
export {default as Comp2} from './Comp2.jsx';
export {default as Comp3} from './Comp3.jsx';

また、~~ES7~~ ES8 では export Comp1 from '…'; と書けるようにする提案もあります。

回答 #2

また、複数の関数を一度にエクスポートする必要がある場合、例えばアクションのような場合には、使用できることを覚えておいてください

export * from './XThingActions';

回答 #3

デフォルトエクスポート

// Default export (recommended)
export {default} from './module' 

// Default export with alias
export {default as d1} from './module'

すべての輸出

// In >ES7, it could be
export * from './module'

// In >ES7, with alias
export * as d1 from './module'

関数名のエクスポート

// export by function names
export { funcName1, funcName2, …} from './module'

// export by aliases
export { funcName1 as f1, funcName2 as f2, …} from './module'

分割代入されたオブジェクトのエクスポート

// export destructured object
export const { myVar, myFunction } = myObjectWithEverything

// export destructured object, with renaming
export const { v1: myVar, f1: myFunction } = myBigObject

配列付き

// it works with array as well
export const [ funcName1, funcName2 ] = myBigArray

詳細情報: https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/export

回答 #4

遅すぎますが、私がそれを解決する方法を共有したいです。

model ファイルがあり、2つの名前付きエクスポートを持っています:

export { Schema, Model };

そして、デフォルトエクスポートを持つcontrollerファイルがあること：

export default Controller;

インデックスファイルでは次のように公開しました:

import { Schema, Model } from './model';
import Controller from './controller';

export { Schema, Model, Controller };

そして、もし私がそれらすべてをインポートしたいと仮定すると：

import { Schema, Model, Controller } from '../../path/';

回答 #5

フォルダー構造：

components|
          |_Comp.js
          |_AnotherComp.js
          |_YetAnotherComp.js
          |_index.js

Comp.jsファイルで.. 他のコンポーネントと同様に行います:

export {Comp}

index.jsから

export {Comp} from './Comp';
export {AnotherComp} from './AnotherComp';
export {YetAnotherComp} from './YetAnotherComp';

今、どこでもインポートできる