反応のインポート地獄を処理する方法は？

Question

私はノードを介して私の反応アプリを実行しています。このインポート地獄を簡単に処理する方法はありますか？

私はNPM開始として

./node_modules/.bin/babel-node --presets react,es2015 server/server.js 

を実行していますよ。これは、エラーを起こしやすいです

import GenericTemplate from "../../templates/GenericTemplate/GenericTemplate"; 
import Footer from "../../organisms/Footer/Footer"; 
import Header from "../../organisms/Header/Header"; 
import Hero from "../../organisms/Hero/Hero"; 
import MainMenu from "../../organisms/MainMenu/MainMenu"; 
import TodoList from "../../organisms/TodoList/TodoList"; 

、ディレクトリ名のようなものchangementは手動で入力することになる。そして、server.jsはReactDOMServer.renderToString(<MyApp />)

私のコンポーネントを反応の中には、このようなものを持っているに役立つ簡単なエクスプレスServerですこれを更新するすべてのファイル。

私はこれをどのように修正できるか考えていますか？理想的には、私は次のようなものを持っています：

import { Footer, Header, Hero, MainMenu, TodoList } from "myComponents" 

は可能ですか？どうやって？

ありがとうございました！

Answer 1

organismsディレクトリに共通コンポーネントファイルを作成して、それを実現できます。私にはかなり良く見ていないにも

import { Footer, Header, Hero, MainMenu, TodoList } from "path to common.js" 

Answer 2

この：あなたの他のファイルに続いて

export Footer from "./Footer/Footer"; 
export Header from "./Header/Header"; 
export Hero from "./Hero/Hero"; 
export MainMenu from "./MainMenu/MainMenu"; 
export TodoList from "./TodoList/TodoList"; 

：ちょうど次を使用して新しいcommon.jsまたは任意の名前を作成

import { Footer, Header, Hero, MainMenu, TodoList } from "myComponents" 

...そのためには、新しいコンポーネントを作成するたびに「myComponents」にエクスポート/インポートする必要があります。

私があなたの例で見ているコアの問題は、インポートに相対パスを使用するとコードベースが非常に維持しにくくなることです。

Reactで "import hell"をエスケープするには、一般的なオプションの1つは、のインポートステートメントを作成することです。

ウェブパックの設定を微調整して、アプリケーションのルートを基準にファイルを読み込むことができます。 hereおよび詳細は​​を参照してください。