在create-react-app中，“npm run build”是什么？

Question

我找不到有关"npm run build"工作原理的任何说明，

它简单易用且获取了运行良好的“build”文件夹，

但是，在create-react-app中，背后到底发生了什么？

它是否完全不同于使用构建工具的其他方式？

如果不是，那它是否利用了其他构建工具？

- Ben Porat

---

npm run <script-name> 是运行项目特定脚本的 npm 语法。这些脚本在 package.json 文件的 scripts 部分中定义。有关更多信息，请参见 npm-scripts 文档。在 create-react-app 中，最可能的是 npm run build 只是调用了其他构建工具（如 gulp、grunt 或 webpack）。检查您的 package.json 文件以查看它运行的确切命令。 - Leonid Beschastny

Answer 1

开发人员经常将JavaScript和CSS拆分为单独的文件。单独的文件让您专注于编写执行单一操作的更模块化的代码块。执行单一任务的文件会降低您的认知负荷，因为维护它们是一项相当繁琐的任务。

背后到底发生了什么?

当将应用程序移至生产环境时，拥有多个JavaScript或CSS文件并不理想。用户访问您的网站时，每个文件都需要额外的HTTP请求，使得您的网站加载速度变慢。为了解决这个问题，您可以创建应用程序的"构建"，将所有CSS文件合并成一个文件，并做同样的事情与您的JavaScript。这样，您就可以最小化用户获取的文件数量和大小。要创建此"构建"，您需要使用"构建工具"。因此使用npm run build命令。

正如您所提到的，运行命令（npm run build）会创建build目录。现在假设您的应用程序中有一堆CSS和JS文件：

css/
  mpp.css
  design.css
  visuals.css
  ...
js/
  service.js
  validator.js
  container.js
  ...

运行 npm run build 后，你的 build 目录将会是这样：

build/
  static/
    css/
      main.css
    js/
      main.js

现在你的应用程序文件很少了。这个应用程序仍然是一样的，但被压缩成一个名为build的小包。

最终结论： 如果所有它做的事情只是为用户节省几毫秒的加载时间，你可能会想知道生成构建是否值得。 如果您只是为自己或其他几个人制作网站，则不必担心此问题。 只有对于高流量网站（或者您希望很快成为高流量网站的网站），才需要生成项目的构建版本。

如果您只是学习开发，或仅制作低流量的网站，则可能不值得生成构建。

- patrick.1729

---

我有一个关于这个的额外问题。我们通过package.json在应用程序中添加的所有第三方库是否也会被转译，即我们是否为每个库拥有单独的构建目录，还是在安装/下载它们时已经有了。我不认为后者是正确的，因为当我导航到node_modules中的任何此类文件夹时，我都看不到任何构建目录。仍然不确定。 - Subham Saha

@SubhamSaha 模块打包工具，如Webpack、Rollup、Parcel等，负责解决JS文件中的依赖关系。在构建时，它们会创建一个依赖图并遍历它，以管理从入口文件开始的所有依赖项。React使用Webpack来实现这一点。希望对你有所帮助！ - patrick.1729

Answer 2

这里简要解释一下：https://github.com/facebookincubator/create-react-app#npm-run-build-or-yarn-build。 它会将React正确地打包到生产模式，并优化构建以获得最佳性能。 构建是经过缩小处理的，文件名包含哈希值。在幕后，它使用 Babel来转译您的代码和Webpack作为构建工具 来打包您的应用程序。

- rgommezz