我正在尝试使用gulp浏览我的反应应用程序以进行生产并设置NODE_ENV。所以我可以在控制台中删除反应警告,错误报告,甚至我的代码来禁用某些功能,例如react-addons-perf的要求。
它工作得很好。当我在我的app.js中搜索" production"看看是否有这些典型的条件:
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');
}));
};
答案 0 :(得分:13)
根据Github上的一个问题,您可以在加载反应之前添加运行单个javascript行以防止它。
<script>
window.__REACT_DEVTOOLS_GLOBAL_HOOK__.inject = function () {}
</script>
然后,您可以考虑使用您的环境条件将其包装起来,就像您在服务器端渲染中所做的那样。让我们说Pug(以前称为Jade):
#{process.env.NODE_ENV == 'production' ? "window.__REACT_DEVTOOLS_GLOBAL_HOOK__.inject = function(){}" : ""}
但是,将业务逻辑和敏感数据放回服务器仍然是一种很好的做法。
答案 1 :(得分:3)
尝试在你的 store.js 中添加这个
const initialState = {};
const middleware = [thunk];
const devTools =
process.env.NODE_ENV === "production"
? applyMiddleware(...middleware)
: composeWithDevTools(applyMiddleware(...middleware));
const store = createStore(rootReducer, initialState, devTools);
export default store;
答案 2 :(得分:2)
您可以检查模式:
在您的 public 文件夹的 index.html 中为this.firestore.collection('myCollection').doc('IDHERE').delete();
添加以下代码
</body>
答案 3 :(得分:1)
只需改善@peteriod答案,以确保是否已安装开发工具
if (typeof window.__REACT_DEVTOOLS_GLOBAL_HOOK__ === 'object') {
__REACT_DEVTOOLS_GLOBAL_HOOK__.inject = function() {};
}
答案 4 :(得分:1)
您还可以在构建后通过在package.json文件中添加以下命令来删除所有源映射。
ColName
导航组件并将其隐藏在devtools上有点困难-源
答案 5 :(得分:0)
如果您使用的是redux-devtools-extension
,则可以这样做。
const devTools =
process.env.NODE_ENV === "production"
? applyMiddleware(...middlewares)
: composeWithDevTools(applyMiddleware(...middlewares));
const store = createStore(rootReducer, initialState, devTools);
这将确保您的devtools扩展仅在开发环境中有效,而在生产环境中无效