npm start 是如何工作的？所有进程都在后台发生了什么？

Question

谁能解释一下当我们运行 npm start 时 React 应用程序的幕后实际发生了什么？React 应用程序是如何加载的？

Answer 1

npm 脚本只是在项目上运行一系列节点命令的快捷方式。任何 npm 脚本，即 package.json 文件的“脚本”部分下列出的任何 node.js 命令，在您调用它们时都通过 node.js 执行。因此，npm start运行startpackage.json 中列出的节点脚本。正如cbr在评论中提到的文章中那样，在 的情况下create-react-app，会发生这种情况：

从同名库中创建 WebpackDevServer 的新实例，传入编译器和配置。Webpack 在这里由 WebpackDevServer 运行。调用实例上的侦听器方法，传入端口和主机值。然后清除控制台并显示文本“启动开发服务器...”。浏览器以正确的开发 URL 打开。最后，当进程被终止时添加了两个侦听器，这会关闭 Web 服务器并退出 start.js 进程。

这是一篇很棒的文章@cbr 链接并强烈推荐。但这仅适用于 CRA。如果您是从头开始设置 React 项目（如果您刚刚开始学习所有这些内容，强烈推荐），您的start脚本可能如下所示：

"start": "webpack-dev-server --mode development --open"

这告诉 webpack 启动开发服务器，实时提供文件，并将浏览器打开到您在webpack.config文件中指定的端口（或者它将使用默认的 8080）。如果您已经准备好为最终部署构建项目，您将编写一个build脚本并运行npm run build. 它可能看起来像这样：

"build": "webpack --mode production"

了解 webpack 将帮助您了解大多数 React 项目背后发生的事情。希望有所帮助，并感谢@cbr。