是否可以为所有React组件自动导入JS文件?

时间:2018-09-10 23:47:49

标签: javascript reactjs import ecmascript-6 auto

我创建了一个日志记录实用程序功能,打算在我的网站的99%的组件上使用它。我想知道是否有可能无需写入“从'utils / logging'中导入import {logger};”即可访问该文件;对于每个React组件?有点像自动导入?

我正在使用create-react-app。

2 个答案:

答案 0 :(得分:0)

如果我正确理解了您的要求,则希望使用console.log的类似用法(不导入控制台),那么您可以尝试以下操作。

在索引文件中,将其设置为global对象(对于服务器端js)或window对象(对于客户端js)。因此,它可以在任何地方访问。

我们使用mmiddleware(使用redux-logger软件包)具有类似的功能:

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

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

希望这会有所帮助!

答案 1 :(得分:-1)

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

否则请查看React / Redux Dev Tools Extension。

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()