npm 启动如何工作?所有进程在后台发生了什么?
How does npm start work? What all processes are happening in the background?
谁能解释一下当我们 运行 npm start 时 React App 的幕后实际发生了什么? React 应用程序是如何加载的?
npm 脚本只是 运行 项目中一系列节点命令的快捷方式。
任何 npm 脚本,即 package.json 文件的“脚本”部分下列出的任何 node.js 命令,在您调用它们时通过 node.js 执行。因此 npm start
运行 是 package.json 中 start
下列出的节点脚本。如cbr在评论中提到的那篇文章,在create-react-app
的情况下,会出现这样的情况:
A new instance of the WebpackDevServer from the library of the same name is created, passing in the compiler and configuration. Webpack is run here by the WebpackDevServer. A listener method on the instance is called, passing in the port and host values. This then clears the console and puts up the text “ Starting the development server…”. The browser is opened with the correct dev URL. Lastly, two listeners are added for when the process is killed, which turns off the web server, and exits the start.js process.
@cbr 链接了一篇很棒的文章,强烈推荐。但这仅适用于 CRA。如果您是 setting up a react project from scratch(如果您刚开始学习所有这些东西,强烈推荐),您的 start
脚本可能如下所示:
"start": "webpack-dev-server --mode development --open"
这告诉 webpack 启动开发服务器,实时提供文件,并打开浏览器到您在 webpack.config
文件中指定的端口(或者它将使用 default 8080)。如果您已经准备好为最终部署构建项目,您将编写 build
脚本和 运行 npm run build
。它可能看起来像这样:
"build": "webpack --mode production"
了解 webpack 将帮助您了解大多数 React 项目的幕后情况。希望有帮助,谢谢@cbr.
谁能解释一下当我们 运行 npm start 时 React App 的幕后实际发生了什么? React 应用程序是如何加载的?
npm 脚本只是 运行 项目中一系列节点命令的快捷方式。
任何 npm 脚本,即 package.json 文件的“脚本”部分下列出的任何 node.js 命令,在您调用它们时通过 node.js 执行。因此 npm start
运行 是 package.json 中 start
下列出的节点脚本。如cbr在评论中提到的那篇文章,在create-react-app
的情况下,会出现这样的情况:
A new instance of the WebpackDevServer from the library of the same name is created, passing in the compiler and configuration. Webpack is run here by the WebpackDevServer. A listener method on the instance is called, passing in the port and host values. This then clears the console and puts up the text “ Starting the development server…”. The browser is opened with the correct dev URL. Lastly, two listeners are added for when the process is killed, which turns off the web server, and exits the start.js process.
@cbr 链接了一篇很棒的文章,强烈推荐。但这仅适用于 CRA。如果您是 setting up a react project from scratch(如果您刚开始学习所有这些东西,强烈推荐),您的 start
脚本可能如下所示:
"start": "webpack-dev-server --mode development --open"
这告诉 webpack 启动开发服务器,实时提供文件,并打开浏览器到您在 webpack.config
文件中指定的端口(或者它将使用 default 8080)。如果您已经准备好为最终部署构建项目,您将编写 build
脚本和 运行 npm run build
。它可能看起来像这样:
"build": "webpack --mode production"
了解 webpack 将帮助您了解大多数 React 项目的幕后情况。希望有帮助,谢谢@cbr.