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

Question

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

这里的问题如下:部署后，如果我在Chrome中打开我的网站并运行开发人员工具，我可以看到我的所有源代码，而不是Chrome中的精简代码，见下图：

。

Answer 1

React是一个库，用于简化网站用户界面的开发。它是用JavaScript编写的，默认情况下，JavaScript在客户端上运行。例如，浏览器中的。默认情况下，可以在浏览器上查看在客户端执行的代码。无论您选择的是React、Backbone等客户端框架，这都是正确的。如果您不想让其他人在浏览器中看到您的代码，我可以考虑使用服务器端模板引擎来开发您的UI。话虽如此，如果这是你的一个大问题，你可以混淆你的JavaScript，这样其他人就更难看到你在做什么。这里有一个您可以使用的JavaScript Obfuscation tool的链接。

希望这能有所帮助！

Answer 2

要避免在浏览器检查器窗口中显示源代码，您必须禁用标志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 3

您在您的webpack中使用的是devtool：'source-map‘，因此请从您的文件中删除devtool：'source-map’。你可以参考一下https://webpack.js.org/guides/production/