从文件夹webpack重新导出所有文件

Question

我们正在使用这样的文件夹结构

components
  | Button.js
  | Nav.js
  | ...etc
  | index.js

somefolder
  |somefile.js

在inderx文件中，我们正在导入每个组件，然后像这样重新导出

 // index.js
  import Button from './Button'
  import Nav from './Nav'

  export {Button, Nav}

这样，我们可以将许多组件导入到这样的文件中

 // somefile.js
  import {Button, Nav} from '../components'

尽管维护索引文件有些麻烦，但不鼓励灵活使用组件。我知道Webpack可以使用这样的语法导入许多文件

function requireAll(r) { r.keys().forEach(r); }
requireAll(require.context('./components/', true, /\.js$/));

但是，我还没有找到重新导出所有这些组件以像上面那样使用它们的方法。

期望的结果是将index.js文件替换为自动将文件夹中的所有文件捆绑在一起的过程，而不必手动添加每个文件。

Answer 1

我认为摆脱文件索引不是最好的解决方案，并且可能引起其他开发人员的疑问。但我可以提供一种稍微简化的方法：

index.js：

export * from './some-component1.js';
export * from './some-component2.js';

some-component1.js：

export {SomeComponent1};

some-component2.js：

export {SomeComponent2};