React.js：如何在生产应用程序的devtools中隐藏节点模块和webconfig？

Question

我已经创建了一个正在运行的React.js应用程序npx create-react-app my-app，但我不希望在生产模式下在devtools中使用完整的项目。

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

我签入了其他已部署的react应用程序，该应用程序未显示静态文件夹或整个项目；我怎样才能做到相同？

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

Answer 1

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

如果没有源地图，发生错误时，您将无法轻易在捆绑文件中找到此错误的出处。如果您不想在生产环境中看到这样的代码，则只需在构建后删除文件即可。删除您的static / css和static / js文件夹中的.map文件。因此，您可以隐藏未捆绑的源代码。但是，捆绑的.js和.css文件将始终存在。由于这是前端，因此无法隐藏它们。

如评论中所述，如果您的担心确实是安全问题，则不能在前端执行此操作。您的代码总是可以看到的，至少是经过缩小和丑化的，但是会看到的。因此，请在后端执行安全性工作。

Answer 2

GENERATE_SOURCEMAP=false react-scripts build

这将不会在最终版本中生成sourcemap（.map）文件。