禁用Chrome对DevTools进行生产 [英] Disable chrome react DevTools for production

问题描述

我正在尝试使用gulp来浏览我的反应应用程序，然后envify设置NODE_ENV。所以我可以删除反应警告，控制台中的错误报告，甚至是我的代码，以禁用某些功能，如react-addons-perf的要求。

。当我在app.js中搜索production时，看看是否有这些典型的条件：

  if（development ！==production）{
 ... 
} 
  

但是，我仍然可以看到chrome对所有反应组件都反应了DevTools选项卡，就像我曾经说过的那样在开发网站上。 如何在chrome的开发工具中禁用此选项卡？

以下是我的gulp任务：

  var production = process.env.NODE_ENV ==='production'？真假; 
 var environment = process.env.NODE_ENV？ process.env.NODE_ENV：'dev'; 
 
 ... 
 
 var bundler = browserify（{
 debug：！production，
 
 //这些选项仅用于Watchify 
 cache：{}，packageCache：{}，fullPaths：true 
}）
 .require（require.resolve（'./ dev / client / main.js'），{entry： }} 
 .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上的一个问题，在加载反应之前加入一个单独的javascript行以防止它。

From react-devtools＃191

 < script> 
 window .__ REACT_DEVTOOLS_GLOBAL_HOOK __。inject = function（）{} 
< / script> 
  

然后，你可以考虑用你的环境条件包装它，就像你可以像下面那样做你的服务器端渲染。比方说帕格（以前称为Jade）：

 ＃{process.env.NODE_ENV =='production'？ window .__ REACT_DEVTOOLS_GLOBAL_HOOK __。inject = function（）{}：} 
  

然而，将业务逻辑和敏感数据放回服务器仍然是一个很好的做法。

I'm trying to browserify my react app for production using gulp and envify to setup NODE_ENV. So I can remove react warning, error reporting in the console, and even my code to disable some features like the require of react-addons-perf.

And it's working great. When I search in my app.js for "production" to see if there are theses typical conditions :

if("development" !== "production") {
    ...
}

There is nothing, so, as I said, it seems to work well.

But, I still can see that chrome's react DevTools tab with all react components, like if I was on a development website. How can I disable this tab in chrome's dev tools ?

Here is my gulp task :

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

解决方案

According to an issue on Github, you can add run a single javascript line before react is loaded to prevent it.

From #191 of react-devtools

<script>
window.__REACT_DEVTOOLS_GLOBAL_HOOK__.inject = function () {}
</script>

Then, you may consider wrapping this with your environment condition, like that you could do sth like below in your server side rendering. Let's say Pug (formerly known as Jade):

#{process.env.NODE_ENV == 'production' ? "window.__REACT_DEVTOOLS_GLOBAL_HOOK__.inject = function(){}" : ""}

However, it would be still a good practice to put the business logic and the sensitive data back to your server.

这篇关于禁用Chrome对DevTools进行生产的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！