React.js：如何在生产应用程序的devtools中隐藏节点模块和webconfig？ [英] Reactjs:How to hide node modules and webconfig in the devtools on production app?

问题描述

我已经创建了一个运行 npx create-react-app my-app 的React.js应用程序，但我不想在devtools中使用完整的项目

如何在源选项卡（devtools）中禁用或隐藏节点模块和webconfig？

我签入了其他已部署的react应用程序，该应用程序未显示静态文件夹或整个项目；

下面是我的浏览器来源标签控制台的屏幕截图，其中显示了一些我想向公众隐藏的目录；

解决方案

由于源映射文件，您在devtools中看到了完整的代码。这是在开发中甚至对于某些生产模式中的人进行代码调试的好方法。

没有源映射，当发生错误时，您将不容易找到错误的位置此错误来自您的捆绑文件中。如果您不想在生产环境中看到这样的代码，则只需在构建后删除文件即可。删除您的static / css和static / js文件夹中的.map文件。因此，您可以隐藏未捆绑的源代码。但是，捆绑的.js和.css文件将始终存在。

如评论中所述，如果您的担忧确实是安全问题，那么您不能在前端进行此操作。

。您的代码将始终可见，至少是经过精简和丑化的代码，但是将会存在。因此，请在后端进行安全防护。

I've created a React.js application running npx create-react-app my-app and I don't want the complete project to be available in the devtools when in production mode.

How can I disable or hide node modules and webconfig in the sources tab(devtools)?

I checked in other deployed react application which does not show static folder or the entire project; how can I achieve same?

Below, a screenshot from the console of my browser's "Sources" tab, showing some directories I would like to hide to the public;

解决方案

You see your full code in devtools because of source mapped files. It is a great way to debug your code in development or even for some people in production mode.

Without sourced maps, when an error occurs you can't easily find where this error is coming from in your bundled files. If you don't want to see your code like this in production you can simply delete the files after the built. Remove the .map files in your static/css and static/js folders. So, with this you can hide your unbundled source code. But, bundled .js and .css files will be always there. There is no way to hide them since this is frontend.

As told in the comments if your concern is really a security issue, then you can't do this on frontend. Your code always will be seen, at least its minified and uglified but there will be. So, do your security stuff in backend.

这篇关于React.js：如何在生产应用程序的devtools中隐藏节点模块和webconfig？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！