动态Webpack要求文件夹中的内容

Question

对于每个主要的React组件，我旁边都有一个components文件夹。在每个主要组件内部，我必须分别从components文件夹中import每个组件。我正在尝试设置一些代码，这些代码自动将所有组件从Components文件夹导入到该主要组件文件/作用域/环境中。

const app = require.context(".", true, /^\.\/.*\jsx$/)
const mainComponentFile = app('./path/to/file')
const components = require.context('./path/to/file/components', true, /^\.\/.*\jsx$/)
components.keys().forEach((x) => {
  mainComponentFile.require(x) // I know this doesn't work, my question is how can I do this?
})

我可以看到[[Scopes]]中定义的每个模块的闭包，但是我无法以编程方式访问该对象（我在其他SO问题中已经读到了为什么）。

Answer 1

我将建立一个构建脚本，根据找到的组件文件为您生成所有导入。

只要您在文件名和组件名称之间有约定，就可以生成这样的代码行

export { Card } from './components/card';
export { Button } from './components/button';

然后您可以将它们导入到您的主要组件中，并根据需要使用它们

有帮助吗？