Reactjs:如何在生产应用程序的devtools中隐藏节点模块和webconfig?

问题描述 投票:1回答:3

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

如何在源选项卡(devtools)中禁用或隐藏节点模块和webconfig?

我检查了其他部署的反应应用程序,它没有显示静态文件夹或整个项目;我该如何实现同样的目标?

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

reactjs create-react-app production devtools
3个回答
6
投票

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

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

正如评论中所说,如果你的担心确实是一个安全问题,那么你就不能在前端做到这一点。你的代码总会被看到,至少它的缩小和丑化,但会有。所以,在后端做你的安全工作。


7
投票
GENERATE_SOURCEMAP=false react-scripts build

这不会在最终版本中生成源图(.map)文件。


0
投票

运行npm run build时,webpack会将所有js文件捆绑到一个主js文件中。生成构建后,您的开发文件,即es6中的代码响应将无法在build文件夹中找到。

© www.soinside.com 2019 - 2024. All rights reserved.