Question

我是React和Webpack的新手，所以我有一个（可能是微不足道的）问题：

我不喜欢的是，我的用户必须提供以下配置：

.jsx

import Scroll2TopButton from 'react-scroll2top-button/Scroll2TopButton';

webpack.config.js

module: {
    loaders: [
      {
        ...,
        include: [path.resolve(__dirname, 'node_modules/react-scroll2top-button/Scroll2TopButton')],
        ...
      }
    ]
  }

有没有最佳方法摆脱这种丑陋的配置？我希望我的用户能够通过导入它来使用我的组件，例如：

import Scroll2TopButton from 'react-scroll2top-button';

，仅此而已。

我使用了“丑陋”这个词，因为我几乎可以肯定有一种方法可以解决这个问题，因为我看到这是其余反应组件的工作方式。也许我错过了一些非常重要的东西，但这就是我来到这里的原因，也是为了学习正确的方法，因为我已经完成了这项工作twice，我认为这不是那么方便。

Thodoris

Answer 1

您的包裹缺少入口点。

添加index.js文件并导出Scroll2TopButton作为默认值：

import Scroll2TopButton from './Scroll2TopButton.jsx';

export default Scroll2TopButton;

或者只需将Scroll2TopButton.jsx重命名为index.js。

改进react组件的webpack配置

1 个答案: