create-react-app 中的“npm run build”是啥？

Posted 2023-02-22

【中文标题】create-react-app 中的“npm run build”是啥？

【英文标题】：What is "npm run build" in create-react-app?create-react-app 中的“npm run build”是什么？

【发布时间】：2017-10-05 11:10:24

【问题描述】：

我找不到任何关于“npm run build”工作的解释，

它简单易用，我得到了“构建”文件夹，效果很好，

但是，在 create-react-app 中，幕后究竟发生了什么？

构建工具的使用方式完全不同吗？

如果没有，是否使用其他构建工具？

【问题讨论】：

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

【参考方案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 的小包。

最终判决： 您可能想知道为什么构建甚至值得，如果它所做的只是为您的用户节省几毫秒的加载时间。好吧，如果您只是为自己或其他几个人创建网站，则不必为此烦恼。只有高流量网站（或您希望很快成为高流量的网站）才需要生成项目的构建版本。

如果您只是在学习开发，或者只是制作流量非常低的网站，那么生成构建可能不值得您花时间。

【讨论】：

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

【参考方案2】：

这里简单解释一下：https://github.com/facebookincubator/create-react-app#npm-run-build-or-yarn-build。

它在生产模式下正确捆绑 React 并优化构建以获得最佳性能。

构建被缩小，文件名包含哈希。

在幕后，它使用babel to transpile your code and webpack as the build tool 捆绑您的应用程序。