Deaktivieren Chrom reagieren DevTools für die Produktion

Question

Ich versuche meine reagiere App für die Produktion mit Hilfe von gulp und envify zu browserfizieren, um NODE_ENV einzurichten. So kann ich reagieren Warnung, Fehlerberichte in der Konsole und sogar meinen Code, um einige Funktionen wie die Anforderung von react-addons-perf zu deaktivieren.

Und es funktioniert super. Als ich in meinem app.js für „Produktion“ zu sehen, zu suchen, wenn es Thesen sind typische Bedingungen:

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

Es gibt nichts, so, wie ich schon sagte, es scheint gut zu funktionieren.

Aber ich kann immer noch sehen, dass Chrome DevTools Tab mit allen reagierenden Komponenten reagieren, als ob ich auf einer Entwicklungswebsite wäre. Wie kann ich diese Registerkarte in den Dev-Tools von Chrome deaktivieren?

Hier ist meine Aufgabe schluck:

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

Answer 1

Nach einer Ausgabe auf Github, können Sie eine einzelne JavaScript-Zeile hinzufügen ausführen, bevor reagieren geladen wird, es zu verhindern.

Von #191 of react-devtools

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

Dann können Sie wickeln diese mit Ihrer Umgebung Zustand betrachten, wie, dass man etw wie unten in der Server-Seite Rendering tun könnte. Sagen wir Mops (früher als Jade bekannt):

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

Allerdings wäre es immer noch eine gute Praxis, die Business-Logik und die sensiblen Daten auf den Server zurück zu setzen.