检测React/ReactDOM开发/生产构建

Question

React开发构建的行为与生成构建不同,例如错误处理.

由于process.env.NODE_ENVReact包的使用方式,可以计算出哪个是从环境中使用但仅在模块化环境中使用的:

if (process.env.NODE_ENV === 'production') {
  module.exports = require('./cjs/react.production.min.js');
} else {
  module.exports = require('./cjs/react.development.js');
}

process.env可能不适用的情况是React全局用作UMD模块,window.React并且window.ReactDOM:

<script src="some-unknown-react-version.js"></script>

<script>
React // is it in production mode?
</script>

可能的用途是:

• 可以在模块化和全局环境中工作的组件(发布为UMD),并在生产中呈现不同的组件

• 浏览器扩展或用户脚本,从中检测构建/生产模式React或ReactDOM对象

如何在不依赖环境的情况下在运行时准确检测React开发/生产构建？

我正在寻找可靠和干净的解决方案,如果可能的话,它将适用于React 15和React 16.

这不是类似问题的重复,因为现有的答案通过解决问题process.env.

Answer 1

有区别.在开发模式中,React元素具有已_self定义的属性,而在生产模式中,未定义属性.

因此,解决方案是使用如下代码测试此属性:

function ReactIsInDevelomentMode(){ 
    return '_self' in React.createElement('div');
}