如何处理导入地狱的反应?
我通过节点运行我的反应应用程序。 有没有办法轻松处理这个导入地狱?
我在跑
./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是做出没有相对path的import报表 。
通过对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"