前端项目中运行 npm run xxx 的时候发生了什么？

前端项目中运行 npm run xxx 的时候发生了什么？

---

---

前言

最近修改项目配置时，引发的疑问，在此记录一下

---

执行命令

当你使用npm 的时候，都应该知道 它是 node 的依赖管理器，当然也可以使用其它命令，比如常见的 pnpm/yarn/cnpm/ni ；
（我们用一种对话的方式叙述吧！突然想到这样可能更好理解，面试官简称为 面，面试者简称 我）

面 ： npm run xxx的时候，发生了什么？讲的越详细越好?
我 : npm run xxx，让我想想，我们运行一下项目的时候，首先得从 package.json 文件中 找 script，然后找对应得命令，当前命令执行的就是命令后面所叙述的。比如 执行 npm run serve，现在就是执行的 vue-cli-service serve

package.json 文件

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

面 ： 那为什么不直接执行 vue-cli-service serve 呢？
我 ： （哎！是哈，有点道理，为啥不直接执行后面的呢，难道是因为记不住？）额，因为前面的简单，容易记住啊！
面 ： 你再想想！
我 ： 因为 vue-cli-service serve 这条指令不存在在操作系统中，执行会报错。
面 ： 那 你刚说 执行 npm run serve === vue-cli-service serve ,那执行前者为啥不报错呢？
我 ： 愣住！！！（ 什么玩意儿 ，我想想）

当 npm 运行 vue-cli-service serve时

这条命令，会先在 ​node_modules/.bin​ 下面找找有没有同名的可执行文件，如果有，则运行当前文件。让我们打开目录看看

我们在安装依赖的时候，通过 npm install xxx来执行，就会在 node_modules/.bin/ 中创建几个与安装包同名的可执行文件了。
由此我们知道，当用 npm run serve执行 vue-cli-service serve 时，虽然没有安装 vue-cli-service serve 命令，但是 npm 会在 .​node_modules/.bin 中找到 vue-cli-service文件作为脚本来执行，所以 npm run serve 就相当于执行了 .​node_modules/.bin/vue-cli-service serve,那如上图，我们有三个同名文件，怎么判断运行的哪一个呢？

可执行文件

在 windows 系统上，可执行文件是通过组策略和环境变量决定的。在cmd上 使用 ​set pathext​ 可以查看

顺便提一下

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

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

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

当前我们使用的 cmd运行 ，则 ​vue-cli-service serve​，就相当于 node_modules/.bin/vue-cli-service.cmd serve​

总结

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