运行npm run xxx 发生了什么

1. 运行npm run xxx 发生了什么?
   npm run xxx的时候首先会去项目的package.json文件里找到scripts中对应的xxx，来运行相应的命令；例如vue项目中的npm run serve, 实际上是找到package.json文件中scripts里面的serve，执行vue-cli-service serve命令；

2. 为何不直接执行vue-cli-service serve命令?
   直接执行vue-cli-service serve命令会报错，操作系统中没有vue-cli-service这一条命令;

3. 执行npm run serve的时候，也就是相当于执行了vue-cli-service serve ，为什么这样它就能成功，而且不报指令不存在的错误呢？

   • 我们在安装依赖的时候，是通过npm i xxx来执行的，例如: npm i vue-cli-service, npm 在安装这个依赖的时候就已经在node_modules/.bin/中创建好了以vue-cli-service为名的几个可执行文件了;
   • .bin目录并不是一个npm包，目录下的文件表示是一个个的软连接，打开文件，顶部显示: #!/bin/sh表示这是一个脚本; 所以我们在执行npm run serve(等同于: npm run vue-cli-service serve)时，虽然没有安装全局命令，但npm会到node_modules/.bin目录中找到vue-cli-service文件作为脚本来执行，则相当于执行了 ./node_modules/.bin/vue-cli-service serve（最后的 serve 作为参数传入），因此是不会报错的；

4. bin目录下的那些软连接文件是哪里来的呢？它又是怎么知道这条软连接是执行哪里的呢？
   

vue-cli-service存在于项目最外层的package-lock.json中。当我们npm整个项目的时候，npm将整个bin/vue-cli-service.js作为bin声明了；所以在npm install时，npm读到该配置时就将该文件软连接到.node_modules/.bin/目录下了, 而npm还会自动将node_modules/.bin加上$PATH, 这样就可以直接做为命令依赖程序和开发依赖程序，不用全局配置了;
5. 在node_modules/bin中 有三个vue-cli-service文件。为什么会有三个文件呢？
在.bin目录下，一般针对一个依赖模块会有三个可执行文件，三者的作用都是用node执行一个js文件；
在cmd中运行的时候，windows一般调用的是vue-cli-service.cmd文件，所以当我们运行vue-cli-service serve命令时就相当于是运行了node_modules/.bin/vue-cli-service.cmd serve, 然后这个脚本会使用node去运行vue-cli-service.js这个文件；
由于node可以使用一系列系统相关的API，所以在这个js中可以做很多事情，eg: 读取并分析运行这条命令下的目录的文件、根据模板生成文件等。

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

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

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

6. 小结:

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

8. 详情参考: 1. blog.51cto.com/u_15077533/… 2. juejin.cn/post/697172… 3. https://juejin.cn/post/7078924628525056007