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

Question

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

if (React.isDevelopment) {
  // Development thing
} else {
  // Real thing
}

Answer 1

最好用你的构建工具模仿Node的做事方式 - webpack,browserify - 通过公开process.env.NODE_ENV.通常,您将它设置为prod中的"production"和dev中的"development"(或undefined).

所以你的代码变成:

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

有关如何设置它,请参阅envify或在webpack中传递依赖于环境的变量

Answer 2

我使用了一个帮助文件（在 Typescript 中）：

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())
{
    ...
}

Answer 3

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

该import.meta对象将上下文特定的元数据公开给 JavaScript 模块，更多信息请参见此处

在我看来，这与较新的 esmodules 导入/导出语法一致，因此是 JS（和 Typescript）中读取环境变量的最新标准。

但是，如果import.meta不可用，那么环境变量应该可以使用process.env（好的旧的 commonJS 方式）

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

Answer 4

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

来源是上面 David 的回答以及在 html 文件中使用环境变量的 create-react-app 文档

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