Reactjs：如何在生产应用程序的 devtools 中隐藏节点模块和 webconfig？答案

【问题标题】：Reactjs:How to hide node modules and webconfig in the devtools on production app?Reactjs：如何在生产应用程序的 devtools 中隐藏节点模块和 webconfig？
【发布时间】：2018-11-20 06:32:55
【问题描述】：

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

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

我签入了其他未显示静态文件夹或整个项目的已部署 React 应用程序；我怎样才能做到这一点？

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

【问题讨论】：

您可能正在使用开发者模式，生产模式不显示任何文件。它们捆绑在一起。
感谢您的回复。如何将其更改为生产模式？我刚刚运行npm run build，在服务器上部署了构建文件夹。
我可以知道为什么这个问题被否决了吗？虽然我已经关注了所有必要的信息
@Karthik stackoverflow.com/a/51529433/2012163

标签： reactjs create-react-app production devtools

【解决方案1】：

快跑

npm run build --nomaps

【讨论】：

【解决方案2】：

GENERATE_SOURCEMAP=false react-scripts build

这不会在最终构建中生成源映射 (.map) 文件。

【讨论】：

【解决方案3】：

由于源映射文件，您可以在 devtools 中看到完整代码。这是在开发中调试代码的好方法，甚至对于处于生产模式的某些人来说也是如此。

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

如 cmets 所述，如果您的担忧确实是一个安全问题，那么您不能在前端执行此操作。你的代码总是会被看到，至少它会被缩小和丑化，但总会有的。所以，在后端做你的安全工作。

【讨论】：

我刚刚删除了 .map 文件。现在，它没有在 devtools 中显示节点模块和 web 配置。但是，我只想知道为什么生成 .map，因为它不是必需的。跨度>
“不需要”是一个有争议的短语。这是源映射，它是在开发中调试代码的好方法，甚至对于处于生产模式的某些人来说也是如此。如果没有源地图，当发生错误时，您将无法在捆绑文件中轻松找到此错误的来源。如果您不想在生产中看到这样的代码，您只需在构建后删除文件即可。

【解决方案4】：

当您运行npm run build 时，webpack 会将您的所有 js 文件捆绑到一个主 js 文件中。您的开发文件，即 es6 中的 react 代码，在生产构建后将不会在 build 文件夹中可用。

【讨论】：

感谢您的回复。当我运行npm run build 时，会生成一个生成文件夹，其中包含具有 css 和 js 文件夹的静态文件夹，其中包含两个文件，一个是缩小文件，另一个是地图扩展名。你可以请参阅问题中所附的图片
是的，我可以看到吗？
我该如何继续，如何在开发工具中隐藏它
你不能对用户隐藏基本的 js 或样式。它总是可用的。如果您担心信息安全，则只能从服务器端提供可靠的安全性。
在生产中的任何一个 react 应用程序中，它都没有显示 config、webpack、node 模块等文件夹。我猜想带有地图扩展名的 js 导致了这一切。因为它的大小约为 17mb。