CODEWITHSUNDEEP
javascriptreactjsgulp
Kousha
Kousha

Reputation: 36219

Gulping ReactJS based on environmental variables?

Is it possible to have a ReactJS UI, where certain components upon compiling using Gulp are removed, depending on what the environmental variables are?

So say that my React looks as below; upon compiling with gulp, I want to use process.env.NODE_ENV to either compile DevOnly or not.

I realize that a variable and if statement could be used. But I prefer that this component does not show up at all in the compiled format.

var DevOnly = React.createClass({}) // This has to hide on Prod

var App = React.createClass({
    render: function () {
        return (
                < div >
                    Stuff, including DevOnly (if dev)
                < / div >
        )
    }
});

Upvotes: 0

Views: 41

Answers (1)

Łukasz
Łukasz

Reputation: 36201

You are looking for a preprocessor and it turns out gulp has one https://www.npmjs.com/package/gulp-preprocess

It will looks something like that (although I haven't tested it):

var DevOnly = React.createClass({}) // This has to hide on Prod

var App = React.createClass({
    render: function () {
        return (
                <div>
                    <Stuff/> 
                   /* @if NODE_ENV=='dev' */ <DevOnly/> /* @endif */                   
                </div>
        )
    }
});

Upvotes: 2

Related Questions