当前位置：网站首页 > IT知识 > 正文

运行 npm run xxx 的时候发生了什么?

liuian 2025-01-05 18:42 107 浏览

前言：

面试官：npm run xxx的时候，发生了什么？讲得越详细越好。

我（心想，简单啊）：首先，DNS 解析,将域名解析出来 IP 地址，然后 TCP 连接,TCP 三次握手...

面试官：停停，我问的不是从URL输入到页面展现到底发生什么？，是npm run xxx的时候，发生了什么。

执行原理

使用npm run script执行脚本的时候都会创建一个shell，然后在shell中执行指定的脚本。

这个shell会将当前项目的可执行依赖目录（即node_modules/.bin）添加到环境变量path中，当执行之后之后再恢复原样。就是说脚本命令中的依赖名会直接找到node_modules/.bin下面的对应脚本，而不需要加上路径。

执行顺序

一个npm脚本可以执行多个任务，这些任务之间可以指定不同的执行顺序。& 并行执行顺序，同时执行

"dev":"node test.js & webpack"

&&继发顺序，执行前面之后才可以执行后面

"dev":"node test.js && webpack"

npm run dev 发生了什么

以vue cli 3配置为例，
"scripts":{
"dev":"vue-cli-serviceserve",
"serve":"vue-cli-serviceserve",
"build":"vue-cli-servicebuild",
"lint":"vue-cli-servicelint"
}
执行npmrundev后
npm会去package.json里边的scripts字段里找dev这个命令
如果配置了的话，就会执行对应的配置vue-cli-serviceserve
vue-cli-service也是一个命令。

package.json文件

{
  "name": "h5",
  "version": "1.0.7",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve"
   },
}

面试官：嗯，不错，那为什么不直接执行vue-cli-service serve而要执行npm run serve 呢？

我（支支吾吾）：emm，因为 npm run serve 比较简短，比较好写。

面试官：你再想想。

我（啊？不对吗，对哦，我想起来了）：因为直接执行vue-cli-service serve，会报错，因为操作系统中其实没有存在vue-cli-service这一条指令

面试官：哦，对对对，不错不错！

那为什么执行npm run serve的时候，这样它就能成功，而且不报指令不存在的错误呢？

面试问道我这些，我就说不出个所以然了！这样肯定又要凉凉.........

后面我找了一些资料，发现其实我们在安装依赖的时候，是通过npm i xxx 来执行的，例如 npm i @vue/cli-service，npm 在安装这个依赖的时候，就会node_modules/.bin/ 目录中创建好vue-cli-service 为名的几个可执行文件了。

.bin 目录，这个目录不是任何一个 npm 包。目录下的文件，表示这是一个个软链接，打开文件可以看到文件顶部写着 #!/bin/sh ，表示这是一个脚本。

由此我们可以知道，当使用 npm run serve 执行 vue-cli-service serve 时，虽然没有安装 vue-cli-service的全局命令，但是 npm 会到 ./node_modules/.bin 中找到 vue-cli-service 文件作为脚本来执行，则相当于执行了 ./node_modules/.bin/vue-cli-service serve（最后的 serve 作为参数传入）。

.bin 目录，这个目录不是任何一个 npm 包。目录下的文件，表示这是一个个软链接，打开文件可以看到文件顶部写着 #!/bin/sh ，表示这是一个脚本。

这时候如果你看明白了，肯定又会问.bin 目录下的文件既然是表示软连接，那么这个bin目录下的那些软连接文件是哪里来的呢？它又是怎么知道这条软连接是执行哪里的呢？

有这个疑问，恭喜你！你也是一位优秀的前端面试官了！我们可以直接在新建的vue项目里面搜索vue-cli-service，如上图，可以看到，它存在项目最外层的package-lock.json文件中。从 package-lock.json 中可知，当我们npm i 整个新建的vue项目的时候，npm 将 bin/vue-cli-service.js 作为 bin 声明了。

所以在 npm install 时，npm 读到该配置后，就将该文件软链接到 ./node_modules/.bin 目录下，而 npm 还会自动把node_modules/.bin加入$PATH，这样就可以直接作为命令运行依赖程序和开发依赖程序，不用全局安装了。

假如我们在安装包时，使用 npm install -g xxx 来安装，那么会将其中的 bin 文件加入到全局，比如 create-react-app 和 vue-cli ，在全局安装后，就可以直接使用如 vue-cli projectName 这样的命令来创建项目了。

那么为啥在执行start命令的时候，可以默认执行node server.js命令呢？那是因为node是已经全局安装了，可以直接被调用。这里多一嘴，如果scripts字段里没有start，也不会报错，会去默认执行node server.js命令。

p.s.：如果我们只运行了npm run命令，那么就会去执行scripts字段里所有的脚本命令。

.bin目录下的软链接

我们继续往下看，既然.bin目录下的执行文件是一个个软链接，那么这些软链接文件是哪里来的呢？npm又是怎么知道这些软链接是指向哪里呢？

我们可以直接在项目根目录下的package-lock.json文件里搜索ng.js，可以看到npm在install的时候，就将bin/ng.js作为bin声明了：

因此在npm安装的时候，就把bin/ng.js文件软链接到了./node_modules/.bin 目录下，而npm 还会自动把node_modules/.bin加入$PATH 变量内，这样ng 就可以不用全局安装了，直接作为命令来运行、开发依赖程序。也就是说，软链接相当于是一种映射，在执行npm run xxx的时候，就会到node_modules/.bin目录里找到对应的映射文件，然后再找到相对应的js文件来执行。

而如果我们想不用软链接的方式，直接使用全局安装的命令的话，我们就需要在安装包的时候，使用npm install -g xxx来安装这个依赖，那么就会将xxx其中的bin文件加入到全局中；这样就可以和node一样，直接使用诸如xxx build这样的命令了。

四个可以简写的脚本执行命令

npm start === npm run start
npm stop === npm run stop
npm test === npm run test
npm restart === npm run stop && npm run restart && npm run start

webpack-dev-server：

webpack-dev-server主要是启动了一个使用express的Http服务器。它的作用主要是用来伺服资源文件。此外这个Http服务器和client使用了websocket通讯协议，原始文件作出改动后，webpack-dev-server会实时的编译，但是最后的编译的文件并没有输出到目标文件夹，,实时编译后的文件都保存到了内存当中。因此很多同学使用webpack-dev-server进行开发的时候都看不到编译后的文件