問題描述

我正在嘗試使用 gulp 瀏覽我的 react 應用程序以進行生產，并 envify 設置 NODE_ENV.所以我可以刪除反應警告，控制臺中的錯誤報告，甚至我的代碼來禁用一些功能，比如 react-addons-perf 的要求.

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.

而且效果很好.當我在我的 app.js 中搜索生產"以查看是否存在這些典型條件時:

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.

但是，我仍然可以看到帶有所有 react 組件的 chrome 的 react DevTools 選項卡，就像我在開發網站上一樣.如何在 chrome 的開發工具中禁用此選項卡?

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 ?

這是我的 gulp 任務:

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

推薦答案

根據 Github 上的一個問題，你可以在 react 加載前添加 run 單行 javascript 來防止它.

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

來自 #191 of react-devtools

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

然后，您可以考慮將其與您的環境條件一起包裝，就像您可以在服務器端渲染中執行以下操作一樣.比方說哈巴狗(以前稱為 Jade):

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 react DevTools 進行生產的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！