检测生产与开发在运行时作出反应

是否有可能检测到当前版本的 React 是在运行时进行开发还是生产？我想这样做:

if (React.isDevelopment) {
// Development thing
} else {
// Real thing
}
102460 次浏览
小开
最佳答案

这是最好的模拟节点的方式做事情与您的构建工具-webpack，浏览器-通过公开 process.env.NODE_ENV。通常，在 prod 中将其设置为“ production”，在 dev 中将其设置为“ development”(或未定义)。

所以你的代码变成:

if (!process.env.NODE_ENV || process.env.NODE_ENV === 'development') {
// dev code
} else {
// production code
}

有关如何设置它，请参见 羡慕嫉妒恨或 在 webpack 中传递与环境相关的变量

小开

我使用一个帮助文件(类型) :

import process from "process";


const development: boolean = !process.env.NODE_ENV || process.env.NODE_ENV === 'development';


export default function isDev(): boolean
{
return development;
}

在其他地方，我是这样使用它的:

import isDev from "./helpers/DevDetect";


if (isDev())
{
...
}
小开

我希望能够从 index.html 访问它，并且希望得到一个不涉及弹出 webpack 或者使用其他模块配置它的解决方案，于是我想出了这个解决方案。

来源是 以上是大卫的回答和 Create-response-app 文档，用于在 html 文件中使用环境变量

if ( ! '%NODE_ENV%' || '%NODE_ENV%' === 'development') {
// dev code
} else {
// production code
}
小开

如果在生产环境中也有多个环境。像测试(测试分支)、登台(登台分支)和生产(主分支)。你用 CICD处理的

在这种情况下，NODE _ ENV 将在所有3个环境中返回“ production”。

因此，如果是这种情况，我建议在 。 env文件中添加一个变量。

. env.production

REACT_APP_ENV = "prod"

. env. 舞台

REACT_APP_ENV = "staging"

. env.development

REACT_APP_ENV = "development"

这样您就可以在 utils 文件中创建一个函数。

export const isProdMode = (): boolean => {
if (process.env.REACT_APP_ENV === 'prod') {
return true;
}
return false;
}
小开

import.meta.env应该是所有你需要的！

import.meta对象向 JavaScript 模块 这里更多公开上下文特定的元数据

在我看来，这与较新的 esmodule 导入/导出语法是一致的，因此是 JS (和 Type 脚本)中读取环境变量的最新标准。

但是，如果 import.meta不可用，那么 env 变量应该可以在 process.env中使用(老式的 Common JS 方法) 

console.log(import.meta.env) // ...or process.env


/* dev */
{
"MODE": "development",
"DEV": true,
"PROD": false,


}
/* prod */
{
"MODE": "production",
"DEV": false,
"PROD": true,
}

这意味着你应该能够做像

 import.meta.env.MODE;
// or process.env.MODE;

OBS: env 对象中的值是不同的，这取决于您使用什么样的构建工具来运行您的应用程序。

// create-react-app
{
"NODE_ENV": "development",
"PUBLIC_URL": "",
"FAST_REFRESH": true
}


// vite-app
{
"BASE_URL": "/",
"MODE": "development",
"DEV": true,
"PROD": false,
"SSR": false
}


// I haven't tested but I'm sure nextJS has it's own env setup
小开

您不需要更改您的 webpack 配置-只需检查是否为您的 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>


提交答案