如何处理导入地狱的反应?

我通过节点运行我的反应应用程序。 有没有办法轻松处理这个导入地狱?

我在跑

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

作为npm开始。 而server.js是一个简单的Express服务器,它服务于ReactDOMServer.renderToString(<MyApp />)

我的一些反应组件有这样的东西:

 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"; 

这很容易出错,像目录名称一样的变化会导致手动input每个文件来更新这个。

你有什么想法我可以解决这个问题。 理想情况下,我会有这样的事情:

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

那可能吗? 怎么样?

谢谢!

这对我来说也不好看:

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

…因为要做到这一点,每次创build新组件时都需要导出/导入到“myComponents”。

我在你的例子中看到的核心问题是使用相对path进行导入会使你的代码很难维护。

为了逃避React中的“import地狱”,一个stream行的select是做出没有相对pathimport报表

通过对Webpackconfiguration进行小小的调整,您可以获得相对于应用程序根目录的文件加载。 看到这里 ,阅读更多在这里 。

您可以在organisms目录中创build一个通用组件文件来实现这一目标。 只需创build一个新的common.js或任何名称与以下内容:

 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"; 

然后在你的其他文件中:

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