从文件夹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';

一些-component1.js：

export {SomeComponent1};

一些-component2.js：

export {SomeComponent2};