在運行時檢測生產與開發 React

Question

是否可以在運行時檢測當前版本的 React 是開發版還是生產版？ 我想做這樣的事情：

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

Answer 1

最好通過暴露process.env.NODE_ENV來模擬 Node 使用構建工具（webpack、browserify）做事的方式。 通常，您將在 prod 中將其設置為“生產”，在開發中將其設置為“開發”（或未定義）。

所以你的代碼變成：

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

關於如何設置，請參閱envify或Passing environment-dependent variables in 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

我想從 index.html 訪問它並需要一個不涉及彈出 webpack 或使用其他模塊配置它的解決方案，我想出了這個。

來源是上面大衛的回答和在 html 文件中使用環境變量的create-react-app 文檔

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

Answer 4

`import.meta.env`應該是你所需要的！

import.meta object 將上下文特定的元數據公開給 JavaScript 模塊more here

在我看來，這與更新的 esmodules 導入/導出語法一致，因此是在 JS（和 Typescript）中讀取環境變量的最新標准。

但是，如果import.meta不可用，那么 env 變量應該在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 object 中的值會有所不同，具體取決於您用來運行應用程序的構建工具。

// 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 5

如果您在生產中也有多個環境。 像測試（測試分支），暫存（暫存分支）和生產（主分支）。 您正在使用CICD處理

在這種情況下， process.env.NODE_ENV 將在所有 3 個環境中返回“生產” 。

因此，如果這是您的情況，我建議您在.env文件中添加一個變量。

.env.production

REACT_APP_ENV = "prod"

.env.staging

REACT_APP_ENV = "staging"

.env.development

REACT_APP_ENV = "development"

這樣您就可以在 utils 文件中創建 function 。

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

Answer 6

您不需要更改 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>

在運行時檢測生產與開發 React

問題描述

6 個解決方案

解決方案1
225 已采納 2016-02-18 01:16:02

解決方案2
14 2019-10-25 10:09:55

解決方案3
3 2020-04-14 10:20:30

解決方案4
1 2022-10-25 23:09:46

`import.meta.env`應該是你所需要的！

解決方案5
0 2022-09-20 15:00:15

解決方案6
0 2022-12-05 08:54:31

在運行時檢測生產與開發 React

問題描述

6 個解決方案

解決方案1 225 已采納 2016-02-18 01:16:02

解決方案2 14 2019-10-25 10:09:55

解決方案3 3 2020-04-14 10:20:30

解決方案4 1 2022-10-25 23:09:46

import.meta.env應該是你所需要的！

解決方案5 0 2022-09-20 15:00:15

解決方案6 0 2022-12-05 08:54:31

解決方案1
225 已采納 2016-02-18 01:16:02

解決方案2
14 2019-10-25 10:09:55

解決方案3
3 2020-04-14 10:20:30

解決方案4
1 2022-10-25 23:09:46

`import.meta.env`應該是你所需要的！

解決方案5
0 2022-09-20 15:00:15

解決方案6
0 2022-12-05 08:54:31