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

大家在面试的时候常会被问到浏览器从输入地址到看到页面都经历的什么？几乎是面试必问，那我们平时运行项目或打包时npm run xxx又发生了什么呢？

今天我们探讨下 ~~~

大家都知道目前的node是捆绑npm的，npm是node的依赖管理器，类似的还有pnpm/yarn/cnpm/ni。

运行npm run xxx的时候，首先会去项目的package.json文件里找scirpts中对应的xxx并执行xxx的命令；例如启动Vue项目运行npm run serve时实际上就是执行了vue-cli-service serve这条命令。

疑问1：为什么不直接执行vue-cli-service serve这条命令呢？

原因就是系统中没有vue-cli-service serve这条命令

疑问2：既然vue-cli-service这条命令不存在操作系统中，为什么执行npm run server时，也就是相当于执行vue-cli-service serve命令时就能成功，而且还不报指令不存在的错误呢？

我们在安装依赖时，是通过npm i xxx来执行的，例如npm i @vue/cli-service命令。npm在安装这个依赖时会在node_modulef/.bin目录中创建好以vue-cli-service为名的几个可执行文件：vue-cli-service、vue-cli-service.cmd、vue-cli-service.ps1。

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

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

疑问3：.bin目录下文件表示软连接，那软连接的文件是哪里来的？又是怎么知道这条软连接是执行哪里的？

当我们执行npm i命令为Vue项目安装依赖包时，npm将bin/vue-cli-service.js作为bin在package-lock.json文件中声明了。

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

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

问题4：node_modules/bin中为什么会有三个vue-cli-service文件呢？

在cmd里运行时，windows一般是调用了vue-cli-service.cmd这个文件，即当我们运行vue-cli-service serve这条命令时相当于运行 node_modules/.bin/vue-cli-service.cmd serve。然后这个脚本会使用node去运行vue-cli-service.js这个js文件

由于node中可以使用一系列系统相关的api，所以在这个js中可以做很多事情，例如读取并分析运行这条命令的目录下的文件，根据模板生成文件等。

unix 系默认的可执行文件，必须输入完整文件名 
vue-cli-service 

# windows cmd 中默认可执行文件，不添加后缀名时，自动根据 pathext 查找文件 
vue-cli-service.cmd 

# Windows PowerShell 中可执行文件，可以跨平台 
vue-cli-service.ps1

综上概括起来就是：npm i时npm就帮我们把软连接配置好了，其实软连接相当于一种映射，执行npm run xxx的时候，就会到node_modules/.bin中找对应的映射文件，然后再找到相应的js文件来执行，总结记起来有三步：

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

参考文章 1、参考文章 2