Javascript create-react-app 中的“npm run build”是什么？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/43830866/
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
What is "npm run build" in create-react-app?
提问by Ben Porat
I could not find any explanation regarding the work of "npm run build",
我找不到关于“npm run build”工作的任何解释，
It is simple and easy to use and i get the "build" folder that works great,
它简单易用，我得到了很好用的“build”文件夹，
But, in create-react-app, what happens exactly behind the scene?
但是，在 create-react-app 中，幕后到底发生了什么？
Is it a complete different use of a build tool?
它是构建工具的完全不同的用途吗？
If not, is it utilizing other build tools?
如果没有，它是否使用其他构建工具？
回答by patrick.1729
Developers often break JavaScript and CSS out into separate files. Separate files let you focus on writing more modular chunks of code that do one single thing. Files that do one thing decrease your cognitive load as maintaining them is a quite cumbersome task.
开发人员经常将 JavaScript 和 CSS 分解为单独的文件。单独的文件让您可以专注于编写更多模块化的代码块来完成一件事情。做一件事的文件会减少您的认知负担，因为维护它们是一项非常繁琐的任务。
What happens exactly behind the scene?
幕后究竟发生了什么？
When it's time to move your app to production, having multiple JavaScript or CSS files isn't ideal. When a user visits your site, each of your files will require an additional HTTP request, making your site slower to load.
So to remedy this, you can create a “build”of our app, which merges all your CSS files into one file, and does the same with your JavaScript. This way, you minimize the number and size of files the user gets. To create this “build”, you use a “build tool”. Hence the use of npm run build.
当需要将您的应用程序移至生产环境时，拥有多个 JavaScript 或 CSS 文件并不理想。当用户访问您的网站时，您的每个文件都需要一个额外的 HTTP 请求，从而使您的网站加载速度变慢。因此，为了解决这个问题，您可以创建我们的应用程序的“构建”，它将您所有的 CSS 文件合并到一个文件中，并对您的 JavaScript 执行相同的操作。这样，您可以最大限度地减少用户获取的文件数量和大小。要创建此“构建”，您需要使用“构建工具”。因此使用npm run build.
As you have rightly mentioned that running the command (npm run build) creates you a builddirectory. Now suppose you have a bunch of CSS and JS files in your app:
正如您正确提到的，运行命令 ( npm run build) 会为您创建一个build目录。现在假设你的应用中有一堆 CSS 和 JS 文件：
css/
mpp.css
design.css
visuals.css
...
js/
service.js
validator.js
container.js
...
After you run npm run buildyour builddirectory will be:
运行后，您npm run build的build目录将是：
build/
static/
css/
main.css
js/
main.js
Now your app has very few files. The app is still the same but got compacted to a small package called build.
现在您的应用程序的文件很少。该应用程序仍然相同，但被压缩为一个名为build.
Final Verdict:You might wonder why a build is even worth it, if all it does is save your users a few milliseconds of load time. Well, if you're making a site just for yourself or a few other people, you don't have to bother with this. Generating a build of your project is only necessary for high traffic sites (or sites that you hope will be high traffic soon).
最终结论：您可能想知道为什么构建是值得的，如果它所做的只是为您的用户节省几毫秒的加载时间。好吧，如果您只是为自己或其他一些人制作网站，则不必为此烦恼。只有高流量站点（或您希望很快会成为高流量的站点）才需要生成项目的构建版本。
If you're just learning development, or only making sites with very low traffic, generating a build might not be worth your time.
如果您只是在学习开发，或者只制作流量非常低的网站，那么生成构建可能不值得您花时间。
回答by rgommezz
It's briefly explained here: https://github.com/facebookincubator/create-react-app#npm-run-build-or-yarn-build.
这里简要解释一下：https: //github.com/facebookincubator/create-react-app#npm-run-build-or-yarn-build。
It correctly bundles React in production mode and optimizes the build for the best performance.
The build is minified and the filenames include the hashes.
它在生产模式下正确地捆绑了 React 并优化了构建以获得最佳性能。
构建被缩小，文件名包括哈希值。
Behind the scenes, it uses babel to transpile your code and webpack as the build toolto bundle up your application.
在幕后，它使用babel 来转译您的代码，并使用 webpack 作为构建工具来捆绑您的应用程序。
