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

Question

对于每个主要的React 组件，我在它旁边都有一个组件文件夹。在每个主要组件中，我必须分别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 问题中阅读了原因）。

更新

我有我正在寻找的确切解决方案，并将在周末更新这个问题的答案。简而言之，您需要创建一个Webpack 加载程序，通过以编程方式将import 字符串放入其中来更改源代码。它不会编辑文件本身，只是在将其发送给 webpack 编译之前以字符串格式的代码源。整体解决方案并不太复杂，但为了您的理智，除非您想做一些高度动态的事情，否则请选择@xadm 在 cmets 中提到的解决方案：babel-plugin-import-directory

Answer 1

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

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

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

然后你可以将它们导入到你的主要组件中，并随意使用它们

这有帮助吗？