javascript - 为生产禁用 chrome react DevTools

Question

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

而且效果很好。当我在我的 app.js 中搜索“生产”以查看是否存在这些典型条件时:

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

什么都没有，所以，正如我所说，它似乎运作良好。

但是，我仍然可以看到 chrome 的 React DevTools 选项卡和所有 React 组件，就像我在开发网站上一样。 如何在 chrome 的开发工具中禁用此选项卡？

这是我的 gulp 任务:

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

根据 Github 上的一个问题，您可以在加载 react 之前添加运行单个 javascript 行以防止它。

来自 #191 of react-devtools

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

然后，您可以考虑将它与您的环境条件包装起来，就像您可以在服务器端渲染中执行如下操作一样。假设 Pug(以前称为 Jade):

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

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