前言：

面试官：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 ，表示这是一个脚本。

由此我们可以知道，当使用 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 目录下的文件既然是表示软连接，那么这个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进行开发的时候都看不到编译后的文件

运行常会出现的一些错误

一：运行的时候出现npm resource busy or locked，

解决方法：在网上搜的时候会说modules那个文件出错，但是卸载之后重新安装还是不行的，如下：

也可以试试，然后又根据网上的方法安装了一些其他东西，但是还是一直报那样的错，最后，就又重新建个文件，把项目又拉一遍，然后弄住运行住，没有什么的时候当时就安装上，后来就没有再报这个错了。

二. Please restart this script from an administrative PowerShell!

问题场景：在cmd窗口输入npm install --global --production windows-build-tools报错

Please restart this script from an administrative PowerShell!，

解决方法：以管理员身份运行cmd窗口

三.Syntax Error: Error: PostCSS received undefined instead of CSS string

问题场景：此问题也一般出现在更新了git文件后，由于其他开发人员安装了sass-loader版本，导致本地的sass-loader版本不兼容问题

解决方法：手动卸载当前的node-sass和sass-loader版本，重新安装指定版本

（如果当前的安装不小心污染了本地package.json文件，可查看过往git版本记录，安装对应版本即可）

四、Cannot find module 'bower'（ Cannot find module 'XXX'）

找不到bower （缺少这个）

解决办法：npm install bower （npm install XXX）

这种情况一般是少安装某个依赖包所导致的,其实这个应该算比较简单， 可以直接运行 npm install 然后在 npm run dev 或者 npm run start 试一下。

总结

1. 运行 npm run xxx的时候，npm 会先在当前目录的 node_modules/.bin 查找要执行的程序，如果找到则运行；
2. 没有找到则从全局的 node_modules/.bin 中查找，npm i -g xxx就是安装到到全局目录；
3. 如果全局目录还是没找到，那么就从 path 环境变量中查找有没有其他同名的可执行程序。

参考文章

blog.51cto.com/u_15077533/… juejin.cn/post/697172…