如何在反应中处理进口地狱？

Posted 2023-02-24

【中文标题】如何在反应中处理进口地狱？

【英文标题】：how to handle the import hell in react?

【发布时间】：2017-09-20 05:09:13

【问题描述】：

我正在通过 Node.js 运行我的 react 应用程序。有没有办法轻松处理这种导入地狱？

我在跑步

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

作为 npm 启动。 server.js 是一个简单的 Express Server，服务于 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";

这很容易出错，像目录名称这样的更改会导致手动输入每个文件来更新它。

你知道我该如何解决这个问题吗？理想情况下，我会有这样的东西：

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

这可能吗？怎么样？

谢谢！

【问题讨论】：

这可能对你有帮助：gist.github.com/branneman/8048520

【参考方案1】：

这在我看来也好不到哪里去：

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

...因为为了做到这一点，您需要在每次创建新组件时导出/导入到“myComponents”。

我在您的示例中看到的核心问题是，使用相对路径进行导入会使您的代码库非常难以维护。

为了避免 React 中的“导入地狱”，一种流行的选择是使 import 语句没有相对路径。

对您的 Webpack 配置稍作调整，您就可以让它加载相对于应用根目录的文件。查看here 并阅读更多here。

【讨论】：

这可能会在服务器端渲染失败，因为服务器没有通过 webpack 对吗？

我对服务器端渲染没有任何经验，但我认为一定有办法在那里做同样的事情。

【参考方案2】：

您可以在organisms 目录中创建一个通用组件文件来实现此目的。只需创建一个新的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"