Javascript 动态导入所有组件子目录，而不使用完整路径

我正在使用Next.js进行React。我喜欢Arc（其他react样板）在不需要开发人员指定路径的情况下动态导入组件的方式

import { Input, Label, Field, HomePage, PageTemplate } from 'components' 

文件夹结构可能有点像这样：

components
|_ index.js
|_ atoms
  |_ Input
  |__ index.js
|_ molecules
|_ organisms
|_ templates

export {default as Input } from './atoms/Input';
export {default as Foo } from './molecules/Foo';
// etc

我想像这样导入它：

import { Input } from 'components'

用于动态导入的代码：components/index.js

const req = require.context('.', true, /\.\/[^/]+\/[^/]+\/index\.js$/)

req.keys().forEach((key) => {
  const componentName = key.replace(/^.+\/([^/]+)\/index\.js/, '$1')
  module.exports[componentName] = req(key).default
})

但是它不起作用。我得到的错误是：

找不到模块：错误：无法解析模块“组件”

问题是

require.context

在服务器端不可用。

---

我想我需要在loader config中指定这样导入的路径。任何人都可以分享如何正确完成此操作的提示吗？

这种方法并不完全符合您的要求，但工作原理类似，性能良好，因为其唯一的对象指针指向导入的组件

//Input.js
class Input extends Component {
  render() {
   return <div>'input'</div>
  }
}
export default Input

//index.js
export { default as Input } from './Input/Input'

//otherComponent.js
import { Input } from './components' //path to folder components

//Input.js
类输入扩展组件{
render（）{
返回“输入”
}
}
导出默认输入
//index.js
从“./Input/Input”导出{default as Input}
//otherComponent.js
从“./components”//导入{Input}到文件夹组件的路径

这种方式并不完全符合您的要求，但在性能方面效果类似，因为它只是指向导入组件的对象指针

//Input.js
class Input extends Component {
  render() {
   return <div>'input'</div>
  }
}
export default Input

//index.js
export { default as Input } from './Input/Input'

//otherComponent.js
import { Input } from './components' //path to folder components

//Input.js
类输入扩展组件{
render（）{
返回“输入”
}
}
导出默认输入
//index.js
从“./Input/Input”导出{default as Input}
//otherComponent.js
从“./components”//导入{Input}到文件夹组件的路径

我不认为有一种简单可靠的方法可以用Next.js做你想做的事情

标准/正确的答案是使用相对路径导入本地组件。它更像是一个样板，但我想你最终会发现，与使用Next.js使其按弧形方式工作相比，它的工作量要少一些

---

要跟进@Robsonsjre的建议：

---

为什么不让/components/index.js导出文件夹中的所有组件

我认为有一个隐含的“您编写index.js文件”。对于您的示例，它看起来是这样的：

components
|_ index.js
|_ atoms
  |_ Input
  |__ index.js
|_ molecules
|_ organisms
|_ templates

export {default as Input } from './atoms/Input';
export {default as Foo } from './molecules/Foo';
// etc

---

问题是，每次添加或删除组件时，都必须记住更新此文件。也许可以实现自动化，但我不知道有哪种系统可以在我的脑海中完成这项工作。

我认为没有一种简单可靠的方法可以使用Next.js实现您想要的功能

标准/正确的答案是使用相对路径导入本地组件。它更像是一个样板，但我想你最终会发现，与使用Next.js使其按弧形方式工作相比，它的工作量要少一些

---

要跟进@Robsonsjre的建议：

---

为什么不让/components/index.js导出文件夹中的所有组件

我认为有一个隐含的“您编写index.js文件”。对于您的示例，它看起来是这样的：

components
|_ index.js
|_ atoms
  |_ Input
  |__ index.js
|_ molecules
|_ organisms
|_ templates

export {default as Input } from './atoms/Input';
export {default as Foo } from './molecules/Foo';
// etc

---

问题是，每次添加或删除组件时，都必须记住更新此文件。也许可以实现自动化，但我不知道有哪个系统可以在我的脑海中完成这项工作。

为什么不让/components/index.js导出文件夹中的所有组件？@robsonsjer您可以链接参考资料或显示这方面的示例吗？顺便问一下，这在后台是如何工作的？它会破坏性能或内存消耗吗？默认情况下，Next.js执行SSR，仅呈现导入的内容。为什么不让/components/index.js导出文件夹中的所有组件？@Robsonsjre您可以链接参考或显示该示例吗？顺便问一下，这在后台是如何工作的？它会破坏性能或内存消耗吗？默认情况下，Next.js会执行SSR，只呈现导入的内容。似乎添加的步骤比使用香草方式多，而不是减少。似乎添加的步骤比使用香草方式多，而不是减少。我当前的解决方法是放弃原子设计，并将我的所有组件放在同一个文件夹中。但是，我在babel文件中添加了别名。因此，我可以从“~components/MyComponent”导入

import MyComponent”或从“~redux/input/actions”导入
import{myAction}之类的内容。我当前的解决方法是放弃原子设计，并将所有组件放在同一文件夹中。但是，我在babel文件中添加了别名。因此，我可以从“~components/MyComponent”导入
import MyComponent”或从“~redux/input/actions”导入{myAction}之类的内容`