반응에서 가져 오기 지옥을 처리하는 방법은 무엇입니까?

Question

Node를 통해 반응 앱을 실행하고 있습니다. 이 가져 오기 지옥을 쉽게 처리 할 수있는 방법이 있습니까?

나는 NPM 시작으로

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

를 실행하고 있습니다. 그리고 server.js 내 구성 요소를 반응의 ReactDOMServer.renderToString(<MyApp />)

일부는 이런 일이 제공하는 간단한 Express 서버입니다 :

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 수동으로 입력 초래 모든 파일을 업데이트하십시오.

이 문제를 어떻게 해결할 수 있는지 알고 계십니까? 이상적으로 나는 다음과 같은 것을 가질 것입니다 :

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에서 "가져 오기 지옥"을 피하기 위해 널리 사용되는 옵션 중 하나는이 아닌 가져 오기 명령문을 만드는 것입니다.

Webpack 구성을 약간 조정하면 응용 프로그램 루트를 기준으로 파일을로드 할 수 있습니다. here과 here을 참조하십시오.