是否可以为所有反应组件自动导入 JS 文件？答案

【问题标题】：Is it possible to auto import JS files for all react components?是否可以为所有反应组件自动导入 JS 文件？
【发布时间】：2018-09-10 23:47:49
【问题描述】：

我创建了一个日志实用程序功能，我计划在我的站点中 99% 的组件上使用它。我想知道是否可以访问此文件而无需编写“import { logger } from 'utils/logging';”对于每个 React 组件？有点像自动导入？

我正在使用 create-react-app。

【问题讨论】：

自动导入是什么意思？
@CRayen：不要写“import { logger } from 'utils/logging';”对于每个组件，如果我可以在某个地方引用一次实用程序文件/函数并使其在所有组件中都可以访问，那将会很方便。
查看我的更新答案。没有自动导入之类的东西，但有全局变量。

标签： javascript reactjs import ecmascript-6 auto

【解决方案1】：

如果我正确理解您的要求，您希望 console.log 的类似用法（不导入控制台），那么您可以尝试以下方法。

在您的索引文件中，将其设置为 global 对象（用于服务器端 js）或 window 对象（用于客户端 js）。这样，它就可以在任何地方访问。

我们在 mmiddleware 中有类似的东西（使用 redux-logger 包）：

const logger = require('redux-logger').createLogger

return middleware.concat(logger({
  collapsed: true,
  duration: true
}))

希望这会有所帮助！

【讨论】：

是的，我的日志记录就是向控制台吐出信息。我只是想避免必须为每个组件引用实用程序文件/函数。这种失败的目的是因为我需要为每个组件导入“redux-logger”。
@Markie 谢谢！我们通过将它连接到 Sagamiddleware 来实现这一点（所以 root saga 是我们导入“redux-logger”的唯一地方）
@CRayen 这很酷，但是您不必在导出语句中引用它吗？
@MarkieB 在我们的例子中，sagamiddleware const sagaMiddleware = createSagaMiddleware() 处理了它。

【解决方案2】：

您正在尝试做的事情听起来像是一种糟糕的方式。我认为如果您需要记录自定义数据，最好的解决方案是创建/添加中间件。或者在 React 的情况下可能是一个包装器组件。我不确定。

否则请查看 React / Redux 开发工具扩展。

https://github.com/facebook/react-devtools

https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi

编辑：如果你想忽略好的做法，那么你可以这样做：

// in index.js or app.js or wherever
import { logger } from 'utils/logging'

// if you have an env for development use it here
process.NODE_ENV = 'development' && window.logger = logger

// or just
window.logger = logger


// SomeComponent.js
window.logger()

【讨论】：