Wyłączanie reakcji Chrome DevTools do produkcji

Question

Próbuję zrewidować w przeglądarce moją aplikację do reagowania na produkcje za pomocą łyka i zaktywizować do ustawienia NODE_ENV. Mogę więc usunąć ostrzeżenia o reakcji, zgłaszanie błędów w konsoli, a nawet mój kod, aby wyłączyć niektóre funkcje, takie jak wymagają reakcji-addons-perf.

I działa dobrze. Kiedy szukać w moich app.js dla „produkcji”, aby sprawdzić, czy są tezy typowe warunki:

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

Nie ma nic, tak jak powiedziałem, wydaje się działać dobrze.

Ale nadal widzę, że Chrome reaguje na zakładkę DevTools ze wszystkimi komponentami reagowania, na przykład na stronie internetowej poświęconej projektowaniu. Jak mogę wyłączyć tę kartę w narzędziach programistycznych Chrome?

Oto moje zadanie łyk:

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

Według emisji na Github, można dodać uruchomić pojedynczą linię javascript przed reagują ładowany jest temu zapobiec.

Od #191 of react-devtools

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

Następnie można rozważyć owijania to ze stanu środowiska, jak to można zrobić czegoś tak jak poniżej w renderowania po stronie serwera. Powiedzmy Pug (dawniej znany jako Jade):

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

Jednak byłoby to nadal dobra praktyka, aby umieścić logiki biznesowej i poufnych danych z powrotem na serwer.