Javascript 禁用 chrome react DevTools 进行生产
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/33783620/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Disable chrome react DevTools for production
提问by Ptheitroadette
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.
我正在尝试使用 gulp 和 envify 来浏览我的用于生产的 react 应用程序以设置 NODE_ENV。所以我可以删除反应警告、控制台中的错误报告，甚至我的代码来禁用一些功能，比如 react-addons-perf 的要求。
And it's working great. When I search in my app.js for "production" to see if there are theses typical conditions :
而且效果很好。当我在 app.js 中搜索“生产”以查看是否存在以下典型条件时：
if("development" !== "production") {
...
}
There is nothing, so, as I said, it seems to work well.
没有什么，所以，正如我所说，它似乎运作良好。
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 ?
但是，我仍然可以看到 chrome 的 react DevTools 选项卡包含所有 react 组件，就像我在开发网站上一样。如何在 chrome 的开发工具中禁用此选项卡？
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');
}));
};
回答by peteroid
According to an issue on Github, you can add run a single javascript line before react is loaded to prevent it.
根据 Github 上的一个问题，您可以在加载 react 之前添加运行单个 javascript 行以防止它。
<script>
window.__REACT_DEVTOOLS_GLOBAL_HOOK__.inject = function () {}
</script>
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):
然后，您可以考虑将其与您的环境条件一起包装，就像您可以在服务器端渲染中执行以下操作一样。假设 Pug（以前称为 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.
但是，将业务逻辑和敏感数据放回您的服务器仍然是一个好习惯。
回答by Kenshinman
If you are using redux-devtools-extensionyou can do this.
如果您正在使用，redux-devtools-extension您可以执行此操作。
const devTools =
process.env.NODE_ENV === "production"
? applyMiddleware(...middlewares)
: composeWithDevTools(applyMiddleware(...middlewares));
const store = createStore(rootReducer, initialState, devTools);
This will make sure your devtools extension only works in the development environment and not in the production environment
这将确保您的 devtools 扩展仅适用于开发环境而不适用于生产环境
回答by Cong Nguyen
Just improve @peteriod answer, to make sure Dev tool has installed or not
只需改进@peteriod 答案，以确保已安装开发工具
if (typeof window.__REACT_DEVTOOLS_GLOBAL_HOOK__ === 'object') {
__REACT_DEVTOOLS_GLOBAL_HOOK__.inject = function() {};
}
回答by njmwas
You could also delete all source map after build by adding the command below on your package.json file.
您还可以通过在 package.json 文件中添加以下命令来在构建后删除所有源映射。
"scripts":{
...,
"build": "react-scripts build",
"postbuild": "rimraf build/**/*.map"
}
It makes it a bit difficult to navigate the components and hides them on devtools - source
这使得导航组件并将它们隐藏在 devtools 上变得有点困难 - 来源
