reactjs create-react-app 何时混淆或缩小代码？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/49123885/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
When does create-react-app obfuscate or minify code?
提问by Kyle Pennell
I have kind of a basic question about webpack and react that I can use help with (around code obfuscation/uglification).
我有一个关于 webpack 的基本问题，我可以使用帮助来做出反应（围绕代码混淆/丑化）。
I am using create-react-appfor my application and it appears to create a bundled build for production (after running yarn build).
我正在使用create-react-app我的应用程序，它似乎为生产创建了一个捆绑的构建（运行后yarn build）。
And in that file it seems that everything is put into a main.JS file and main.CSS file Etc. I push this live using "firebase deploy" (in my case). I would like my code to be uglified and not be completely readable by any developer out there.
在该文件中，似乎所有内容都放入了 main.JS 文件和 main.CSS 文件等中。我使用“firebase deploy”（在我的情况下）进行实时推送。我希望我的代码变得丑陋，并且不能被任何开发人员完全阅读。
But when I go to look at my apps in Chrome it doesn't show main.JS or any other of the bundles files. It just shows every single individual file and exactly the code that I've written. Any idea why this is? Why doesn't it show the uglified combined main.js file under the 'sources' tab in chrome? Is this to do with the source map?
但是当我在 Chrome 中查看我的应用程序时，它不会显示 main.JS 或任何其他捆绑文件。它只显示每个单独的文件以及我编写的代码。知道这是为什么吗？为什么它不在 chrome 的“源”选项卡下显示丑陋的组合 main.js 文件？这与源地图有关吗？
回答by Viacheslav Luschinskiy
There is a better way to make sure source maps are not included.
Create .env file in your project root folder and add GENERATE_SOURCEMAP=false. You will get you build without source maps.
有一种更好的方法可以确保不包含源映射。在项目根文件夹中创建 .env 文件并添加GENERATE_SOURCEMAP=false. 您将在没有源映射的情况下构建。
回答by jokka
React minifies the code during the build and generates source maps. JS ends up being sort of obfuscated as a byproduct of minification, not because of secrecy. That way, the end users are able to load scripts faster than if they were not minified, and you (and everybody else) get to navigate around original code when you (or they) open Developer Tools.
React 在构建期间缩小代码并生成源映射。JS 最终被混淆为缩小的副产品，而不是因为保密。这样，最终用户能够比未压缩脚本更快地加载脚本，并且当您（或他们）打开开发人员工具时，您（和其他所有人）可以浏览原始代码。
If you take a look in build/static/jsdirectory after the build, there are pairs of .jsand .mapfiles. JS files are loaded with your website, and .mapfiles are loaded on demand, when Developer Tools are opened.
如果您build/static/js在构建后查看目录，则有成对的.js和.map文件。JS 文件与您的网站一起加载，并且.map在打开开发人员工具时按需加载文件。
To disable sourcemap generation, run your build with GENERATE_SOURCEMAPenvironment variable set to false.
要禁用源映射生成，请在GENERATE_SOURCEMAP环境变量设置为 的情况下运行构建false。
GENERATE_SOURCEMAP=false npm run build
or
或者
GENERATE_SOURCEMAP=false yarn build
or make it part of buildscript in package.json
或使其成为build脚本的一部分package.json
{
…
"scripts": {
…
- "build": "react-scripts build"
+ "build": "GENERATE_SOURCEMAP=false react-scripts build"
}
}
If you omit the sourcemap generation, .mapfiles will not end up in production, and your original source code will not be available for anyone (including you).
如果您省略 sourcemap 生成，.map文件将不会最终投入生产，并且您的原始源代码将无法用于任何人（包括您）。
回答by JemDzem
Just build it with --nomapsparameter:
只需使用--nomaps参数构建它：
npm run build --nomaps
回答by Khairani F
Try this:
尝试这个：
{
…
"scripts": {
"build": "set GENERATE_SOURCEMAP=false && react-scripts build"
}
}
it worked for me and didn't show the .mapfile anymore in production, but it still shows every single individual file and exactly the code that we've written, plus the node_modules folder.
它对我.map有用，并且不再在生产中显示该文件，但它仍然显示每个单独的文件和我们编写的代码，以及 node_modules 文件夹。
maybe it's a firebase thing, cause we are using the free version of firebase or other free deployment services like Now, surge, netlify, or whatever? I am not sure either.
也许这是一个 firebase 的事情，因为我们正在使用 firebase 的免费版本或其他免费部署服务，如 Now、surge、netlify 或其他什么？我也不确定。
