基於環境變量的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> 
     ) 
    } 
});