反応のインデックスファイルからのインポート

Question

コンポーネントライブラリ内ではなく、外部からのインポートにはインデックスファイルを使用できません。 私は、次のディレクトリ構造を使用しています：インデックスファイルは、単にデフォルトのインポートをエクスポートする

+ components 
    | index.js 
    + atoms 
    | index.js 
    + label 
     | label.jsx 
     | label.css 
    + hoc 
    | index.js 
    + withFrame 
     | withFrame.jsx 
     | withFrame.css 
    + clientSpecificStyle 
    | index.js 
    | clientLabel.jsx 

// just one sample 
export { default as Label } from './label/label; 

私は何をしたいの典型的な（基本）スタイリングを区別することができることですコンポーネントとクライアント固有のスタイリングそれはように動作し、コンポーネントインデックスファイルからの輸入を使用して（コンポーネントと同じフォルダ階層に位置すなわちデモページ）「外」から使用する場合

import React, {Component} from 'react'; 

// this doesn't work 
import Label from '../atoms/index'; 
import withFrame from '../hoc/index'; 

// this works 
import Label from '../atoms/label/label'; 
import withFrame from '../hoc/withFrame/withFrame'; 

@withFrame 
class ClientLabel extends Component { 
    render() { 
    return (
     <Label {...this.props}>{this.props.children}</Label> 
    ); 
    } 
} 

export default ClientLabel; 

： 私clientLabelは枠で囲まれたラベルだけです期待される。しかし、ClientLabel内のインデックスファイルからHoCとLabelをインポートすることはできません（コンポーネント/関数が未定義で失敗します）。ただし、インポートのためにHoCおよびLabelコンポーネントファイルを直接使用すると機能します。 （ライブラリ全体のための）一番上のインデックスファイルは、私はこのプロジェクトは、多くの別々のコンポーネントに成長すると予想通り、ので、私がすることができ、すべての輸入品のためのインデックスファイルを使用する方が便利だろう。この

export * from './atoms/index; 
export * from './clientSpecificStyle/index'; 
//... 

のように見えます私が適合しているようにコードを再構成し、対応するインデックスファイル内のコードを1行だけ変更します。

これを機能させることは可能ですか？

---

私のwebpack（v。3.6）設定は、この問題を除いて、期待通りに動作します。ただ、明確にするため、ここではDEV-config設定だ：

const webpack = require('webpack'); 
const path = require('path'); 
const HtmlWebpackPlugin = require('html-webpack-plugin'); 

module.exports = { 
    entry: [ 
    'webpack-dev-server/client?http://localhost:8080', 
    'webpack/hot/only-dev-server', 
    path.resolve('src', 'demo', 'demo.jsx') 
    ], 

    output: { 
    path: path.resolve('dist'), 
    filename: 'bundle.js', 
    }, 

    resolve: { 
    extensions: ['.js', '.jsx'] 
    }, 

    module: { 
    loaders: [ 
     { 
     test: /\.jsx?$/, 
     loader: 'react-hot-loader/webpack!babel-loader', 
     exclude: [/node_modules/] 
     }, 
     { 
     test: /\.css$/, 
     loaders: [ 
      'style-loader?sourceMap', 
      'css-loader?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]' 
     ] 
     } 
    ] 
    }, 

    devServer: { 
    contentBase: './dist', 
    hot: true 
    }, 

    plugins: [ 
    new HtmlWebpackPlugin({ 
     template: path.resolve('src', 'demo', 'index.html'), 
     filename: 'index.html', 
     inject: 'body' 
    }), 
    new webpack.NamedModulesPlugin() 
    ] 
}; 

Answer 1

だから、完全性のために：私は名前の輸出を行ってきたとしてインポートするための正しい方法は

import {Label} from '../atoms

です。

すべての名誉は@ReiDienに行きます