フルパスを使用せずにすべてのコンポーネントサブディレクトリを動的にインポート

Question

私はReactにNext.jsを使用しています。私は、開発者がパスを指定することなく、Arc（他のボイラープレートに反応する）コンポーネントを動的にインポートする方法が好きです。

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

と私は次のようにそれをインポートしたいと思います：

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

フォルダ構造は次のようにやや見えるかもしれダイナミックインポートに使用されて

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 
}) 

しかし、それは動作しません。私が得るエラー：

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

require.contextはサーバサイドでは使用できません。 私は、このパスをloader configにインポートするように指定する必要があると思います。どのようにこれが正しく行われているかについて誰かがヒントを共有できますか？

Answer 1

ため、パフォーマンスのためにも、似ていますあなたはNext.jsで欲しい

標準的な「正しい」回答は、ローカルコンポーネントをインポートするための相対パスを使用することです。これはもう少し定型文ですが、Next.jsとの戦いよりもArcのやり方で行うよりも、仕事が少ないと最終的には思うでしょう。 Robsonsjreの提案@でフォローする

---

：

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

私は "あなたがそのindex.jsファイルを書き込む" 暗黙のがあると思います。あなたの例では、それはこのようなものになります。

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

をキャッチあなたはこのファイルにコンポーネントを追加または削除するたびに更新するように覚えているだろうということです。それはおそらくそれを自動化することが可能ですが、私は頭の上からそれを行うシステムは認識していません。

Answer 2

この方法では正確に何をしたいではありませんが、私は何を行うには、シンプルで信頼性の高い方法があるとは思わない輸入部品への唯一のオブジェクトポインタ

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