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;

我想要做的是能够区分组件的典型（基本）样式和客户特定样式。我的clientLabel只是一个用框架包围的标签：

 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;

从＆＃34;外部使用＆＃34; （即，与组件位于同一文件夹层次结构上的演示页面）使用组件索引文件中的导入，它按预期工作。但我无法从ClientLabel中的索引文件中导入HoC和Label（未定义组件/函数失败）。但是，当直接使用HoC和Label组件文件进行导入时，它可以正常工作。最顶层的索引文件（对于整个库）看起来像这样

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

由于我希望这个项目能够发展成许多单独的组件，所以对所有导入使用索引文件会更方便，因此允许我按照我认为合适的方式重新组织代码并且只更改一行代码。相应的索引文件。

是否有可能让它发挥作用？

我的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

从react中的索引文件导入

1 个答案: