Question

我正在使用Next.js来实现React。我喜欢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/, '$1')
  module.exports[componentName] = req(key).default
})

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

找不到模块：错误：无法解析模块＆＃39;组件＆＃39; ...

问题是服务器端无法使用require.context。我想我需要在loader配置中指定要像这样导入的路径。任何人都可以分享一下如何正确完成这项工作吗？

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做你想做的事。

标准/＆＃34;正确＆＃34;答案是使用相对路径导入本地组件。这是一个更多的样板，但我认为你最终会发现它比使用Next.js更少的工作来使它以Arc方式做事。

跟进@ Robsonsjre的建议：

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

我认为有一个隐含的＆＃34;你写的是index.js文件＆＃34;。对于您的示例，它看起来像这样：

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

每次添加或删除组件时，您都必须记住更新此文件。它可能可以实现自动化，但我不知道有任何系统可以做到这一点。

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

2 个答案: