從文件夾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};