基于环境变量的Gulping ReactJS？

Question

有没有可能有一个ReactJS用户界面，其中某些使用Gulp编译的组件会被删除，具体取决于环境变量是什么？

所以说我的React看起来如下;在编译时，我想使用process.env.NODE_ENV来编译DevOnly或不是。

我意识到一个变量和if statement可以使用。但我更喜欢这个组件在编译后的格式中根本不显示。

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

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

Answer 1

你正在寻找一个预处理器，它原来一饮而尽有一个https://www.npmjs.com/package/gulp-preprocess

它将看起来就像这样（虽然我没有测试过）：

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> 
     ) 
    } 
});