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

Question

我正在为 React 使用 Next.js。我喜欢 Arc（其他反应样板）无需开发人员指定路径即可动态导入组件的方式。

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

文件夹结构可能看起来像这样：

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

我想像这样导入它：

import { Input } from 'components'

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

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

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

然而它不起作用。我得到的错误：

Module not found: Error: Cannot resolve module 'components'...

问题是 require.context 在服务器端不可用。我想我需要在加载程序配置中指定要像这样导入的路径。任何人都可以分享如何正确完成此操作的提示吗？

Answer 1

这种方式不完全是你想要的，但工作方式相似，性能很好，因为它唯一的对象指针指向导入的组件

//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

Answer 2

我不认为有一种简单可靠的方法可以用 Next.js

做你想做的事

标准/"correct" 答案是使用相对路径导入本地组件。它有点样板，但我认为你最终会发现它比使用 Next.js 使它以 Arc 方式做事要简单。

跟进@Robsonsjre 的建议：

Why dont you make your /components/index.js export all components in the folder?

我认为有一个隐含的"you write that index.js file"。对于您的示例，它看起来像这样：

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

要注意的是，每次添加或删除组件时，您都必须记住更新此文件。可能可以自动执行此操作，但我不知道有任何系统可以做到这一点。

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

Dynamically import all component sub directories without using full path

javascript

reactjs

webpack

next.js