我正在尝试浏览我的反应应用程序以使用gulp和envify来设置NODE_ENV.所以我可以在控制台中删除反应警告,错误报告,甚至我的代码来禁用一些功能,例如react-addons-perf的要求.
而且效果很好.当我在app.js中搜索“生产”时,看看是否有这些典型的条件：
if("development" !== "production") {
...
}
没有什么,所以,正如我所说,它似乎运作良好.
但是,我仍然可以看到chrome的DevTools选项卡与所有反应组件的反应,就像我在开发网站上一样.如何在chrome的开发工具中禁用此选项卡？
这是我的gulp任务：
var production = process.env.NODE_ENV === 'production' ? true : false;
var environment = process.env.NODE_ENV ? process.env.NODE_ENV : 'dev';
...
var bundler = browserify({
debug: !production,// These options are just for Watchify
cache: {},packageCache: {},fullPaths: true
})
.require(require.resolve('./dev/client/main.js'),{ entry: true })
.transform(envify({global: true,_: 'purge',NODE_ENV: environment}),{global: true})
.transform(babelify)
.transform(reactify);
var start = Date.now();
bundler.bundle()
.on('error',function (err) {
console.log(err.toString());
this.emit("end");
})
.pipe(source('main.js'))
.pipe(gulpif(options.uglify,streamify(uglify())))
.pipe(gulpif(!options.debug,streamify(stripDebug())))
.pipe(gulp.dest(options.dest))
.pipe(notify(function () {
console.log('Built in ' + (Date.now() - start) + 'ms');
}));
};
解决方法
根据Github上的一个问题,您可以在加载react之前添加运行单个javascript行以防止它.
<script>
window.__REACT_DEVTOOLS_GLOBAL_HOOK__.inject = function () {}
</script>
然后,您可以考虑将此包装在您的环境条件中,就像您在服务器端渲染中所做的那样.让我们说帕格(以前称为玉)：
#{process.env.NODE_ENV == 'production' ? "window.__REACT_DEVTOOLS_GLOBAL_HOOK__.inject = function(){}" : ""}
但是,将业务逻辑和敏感数据放回服务器仍然是一种很好的做法.
