admin管理员组

文章数量:1134247

Is it possible to detect whether the current version of React is development or production at runtime? I'd like to do something like this:

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

Is it possible to detect whether the current version of React is development or production at runtime? I'd like to do something like this:

if (React.isDevelopment) {
  // Development thing
} else {
  // Real thing
}
  • javascript
  • reactjs
Share Improve this question edited Jun 14, 2018 at 14:48 Wingjam 8029 silver badges18 bronze badges asked Feb 17, 2016 at 23:28 pfhayespfhayes 3,9273 gold badges20 silver badges17 bronze badges
Add a comment  | 

6 Answers 6

Reset to default 340

This is best done emulating the Node way of doing things with your build tool - webpack, browserify - by exposing process.env.NODE_ENV. Typically, you'll have it set to "production" in prod and "development" (or undefined) in dev.

So your code becomes:

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

For how to set it up, see envify or Passing environment-dependent variables in webpack

I use a helper file (in Typescript):

import process from "process";

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

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

Then elsewhere I use it like this:

import isDev from "./helpers/DevDetect";

if (isDev())
{
    ...
}

import.meta.env should be all you need!

The import.meta object exposes context-specific metadata to a JavaScript module more here

As I see it, this is aligned with the newer esmodules import/export syntax, and is therefore the latest standard for reading environment variables in JS (and Typescript).

However, if import.meta is not available, then the env variables should be available to you in process.env (the good old commonJS way)

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

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

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

this means you should be able to do stuff like

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

OBS: the values inside the env object are different depending on what build tool your're using to run your app.

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

I wanted access to this from the index.html and desired a solution which didn't involve ejecting webpack or configuring it with additional modules and I came up with this.

Sources are David's answer above and the create-react-app documentation for using environment variables in the html file

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

You don't need to change your webpack configuration - simply check if minifying has been enabled for your js code, which would only be the case in production. E.g. I have disabled logging with this simple trick. The element.type.name will be renamed by minifying.

    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>

If you have multiple environments in production as well. like testing (test branch), staging(staging branch) and production(master branch). Which you are handling with CICD

In this case, process.env.NODE_ENV will return 'production' in all 3 environments.

Hence If this is your case, I would recommend adding a variable in your .env files.

.env.production

REACT_APP_ENV = "prod"

.env.staging

REACT_APP_ENV = "staging"

.env.development

REACT_APP_ENV = "development"

So that you can create a function in your utils file.

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

本文标签： javascriptDetecting production vs development React at runtimeStack Overflow

版权声明：本文标题：javascript - Detecting production vs. development React at runtime - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1736763328a1951674.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。