Disabilita chrome reagisci DevTools per la produzione

Question

Sto provando a browserizzare la mia app di reazione per la produzione usando gulp e invidio all'impostazione di NODE_ENV. Quindi posso rimuovere l'avviso di reazione, la segnalazione degli errori nella console e persino il mio codice per disabilitare alcune funzionalità come la richiesta di react-addons-perf.

E funziona benissimo. Quando cerco nei miei app.js per "produzione" per vedere se ci sono condizioni tipiche tesi:

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

Non c'è nulla, quindi, come ho detto, sembra funzionare bene.

Ma, posso ancora vedere che chrome's reagisce scheda DevTools con tutti i componenti reagire, come se fossi in un sito web di sviluppo. Come posso disabilitare questa scheda negli strumenti di sviluppo di Chrome?

Ecco il mio compito sorso:

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

Secondo una questione su Github, è possibile aggiungere esegue una singola linea javascript prima di reagire viene caricato per impedirlo.

Da #191 of react-devtools

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

Poi, si può considerare di chiudere questo con la vostra condizione ambiente, come quello che si potrebbe fare sth come qui di seguito nel vostro rendering lato server. Diciamo Pug (precedentemente noto come Jade):

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

Tuttavia, sarebbe comunque una buona pratica di mettere la logica di business ei dati sensibili di nuovo al vostro server.