現在、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';

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

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

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 '…';。

また、使用できるアクションなど、複数の関数を一度にエクスポートする必要がある場合は、

export * from './XThingActions';

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

model2つの名前付きエクスポートを持つファイルを持っている：

export { Schema, Model };

そしてcontrollerデフォルトのエクスポートを持つファイルがあります：

export default Controller;

私indexはこの方法でファイルを公​​開しました：

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

export { Schema, Model, Controller };

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

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

単に：

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

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

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

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

または関数名で：

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

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

詳細：https : //developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export

インストール@babel/plugin-proposal-export-default-from：

yarn add -D @babel/plugin-proposal-export-default-from

あなた.babelrc.jsonまたは任意の設定ファイルタイプ

module.exports = {
  //...
  plugins: [
     '@babel/plugin-proposal-export-default-from'
  ]
  //...
}

今exportから直接次のことができますfile-path：

export Foo from './components/Foo'
export Bar from './components/Bar'

幸運を...