基于环境变量的 Gulping ReactJS？答案

【问题标题】：Gulping ReactJS based on environmental variables?基于环境变量的 Gulping ReactJS？
【发布时间】：2016-01-21 22:14:36
【问题描述】：

是否有可能有一个 ReactJS UI，其中使用 Gulp 编译时删除某些组件，具体取决于环境变量是什么？

所以说我的 React 如下所示；使用 gulp 编译时，我想使用 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 >
        )
    }
});

【问题讨论】：

标签： javascript reactjs gulp

【解决方案1】：

你正在寻找一个预处理器，结果 gulp 有一个 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>
        )
    }
});

【讨论】：

你应该写一个例子来帮助 OP。