npm run-script build（production build）命令，在React JS中显示浏览器中的源代码

Question

我是React JS开发的新手，我使用npm create-react-app命令创建了我的React应用程序。完成开发并使用npm run script构建应用程序代码后，这将创建一个新的build文件夹，然后将其与服务器一起部署。

这里的问题如下：部署后，如果我在Chrome中打开我的网站并运行开发人员工具，则能够查看我的所有源代码，而不是Chrome中的缩小代码，请参见下图：。 / p>

Answer 1

为避免在浏览器检查器窗口中显示源代码，必须禁用标志GENERATE_SOURCEMAP，只需按以下方式更新package.json构建脚本命令

scripts: {
  "build": "GENERATE_SOURCEMAP=false react-scripts build"
}

参考：github-> https://github.com/facebook/create-react-app/issues/4162#issuecomment-373658997

Answer 2

React是一个用于简化网站用户界面开发的库。它是用JavaScript编写的，默认情况下 JavaScript在客户端运行。即在浏览器中。默认情况下，可以在浏览器中查看在客户端执行的代码。无论您选择哪种客户端框架，这都是 true ...如果您不希望其他人在浏览器中看到您的代码，我会考虑开发您的UI与服务器端模板引擎一起使用。话虽如此，如果这是您的主要关注点，则可以混淆您的JavaScript，这样其他人就很难看到您在做什么。这是您可以使用的JavaScript Obfuscation tool的链接。

希望有帮助！

Answer 3

您正在Webpack中使用devtool：“源地图”，因此请从文件中删除devtool：“源地图”。 您可以参考https://webpack.js.org/guides/production/