如何在运行时检测 React 中的开发模式与生产模式答案

【问题标题】：How to detect development vs production mode in React at runtime如何在运行时检测 React 中的开发模式与生产模式
【发布时间】：2022-11-26 21:06:25
【问题描述】：

在 React 中有没有什么方法可以在不向客户端公开我所有的 process.env 变量的情况下告诉我在运行时所处的环境？

Webpack 允许我向客户端公开环境变量，这很危险。

if (!process.env.NODE_ENV || process.env.NODE_ENV === 'development') {
    // dev code
} else {
    // production code
}
console.log('here come all my secrets: ', {process.env});

我知道，这个问题已经在 Webpack 的上下文中被问到，但我试图避免复杂的构建配置。

有没有更简单的解决方案？

【问题讨论】：

这回答了你的问题了吗？ Detecting production vs. development React at runtime
你不能只通过 webpack 公开process.env.NODE_ENV而不公开process.env的其余部分吗？

标签： javascript reactjs webpack environment-variables minify

【解决方案1】：

好的，我找到了解决方案：

您可以简单地检查是否已为您的 js 代码启用缩小，这只会在生产中出现。例如。我用这个简单的技巧禁用了日志记录。 element.type.name 将通过缩小重命名。

const MyElement = ({isProduction}) => (<div>Environment: {isProduction?'Production':'Development'}</div>);

const MyElementEl = React.createElement(MyElement);
const isProduction = (MyElementEl.type.name !== 'MyElement');

if(isProduction) //will be true when your js sources are minified 
    console = { ...console, logX: console.log, log: () =>{ } };
    
ReactDOM.render(<MyElement isProduction={isProduction}/>, document.getElementById("app"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<body>
<div id="app" />
</body>

【讨论】：